Javascript 高位图、柱形图重叠问题。如果同一日期在不同时间的x轴上，那么我也会在柱状图中得到重叠的列

我正在使用Highcharts api绘制柱形图

y轴使用整数，x轴使用timesatamp

如果x轴上的数据具有相同的日期但时间不同，则列重叠，但鼠标悬停时可以识别出绘制了两个点

但实际上，我想看到没有重叠的列

这是我的drawMychart.js

function draw(jsonData, start_date, end_date) {
chart = new Highcharts.Chart({

        chart : {
            type : 'column',
            renderTo : 'content',
            plotBorderWidth : 1,
        },

        legend : {
            enabled : false
        },

        title : {
            text : 'My Chart Updates'
        },

        xAxis : {
            type : "datetime",
            //tickInterval : 3600 * 1000, // 1 hours

            min : start_date, // X axis minimum days data start , for now only
            // 2 days
            max : end_date, // X axis maximum limit for date , current date
            startOnTick : true,
            endOnTick : true,

            title : {
                text : 'Time Intervals of Executed Job'
            },
        // labels: {
        // format: '{value}'
        // },

        },

        // yAxis : {
        //  title : {
        //      text : ''
        //  },
        //  labels : {
        //      enabled : false
        //
        //  },
        //  maxPadding : 0.03,
        // },

        tooltip : {

            formatter : function() {
                var date = new Date(this.point.x);
                return "Job Run Time :" + date.toString() + '<br/> '
                        + "Task Id: " + this.point.taskId + '<br/> '
                        + "Compaingn Count:" + this.point.y;
            },

        // ToDo , will check If its possible to use the <table> within formatter

        // useHTML: true,
        // headerFormat: '<table>',
        // pointFormat:
        // // '<tr><th>Job Run time :</th><td> {point.x}</td></tr>' +
        // '<tr><th>Task Id:</th><td>{point.taskId}</td></tr>' +
        // '<tr><th>Compaingn Id:</th><td>{point.compId}</td></tr>' +
        // '<tr><th>Compaign count:</th><td>{point.y}</td></tr>',
        // footerFormat: '</table>',
        // followPointer: true
        },

        // plotOptions : {
        //  bubble : {
        //      minSize : 10,
        //      maxSize : 15,
        //  },
        //  series : {
        //      dataLabels : {
        //          enabled : true,
        //          format : '{point.y}'
        //      }
        //  }
        // },
        plotOptions: {
             column: {
                 pointWidth : 10
             }
         },
        series : [ {
            data : jsonData,
            color : "green",
             pointWidth: 28
        } ]
    });

函数绘图（jsonData、开始日期、结束日期）{
图表=新的高点图表。图表({
图表：{
键入：“列”，
renderTo:'内容'，
打印边框宽度：1，
},
图例：{
已启用：false
},
标题：{
文本：“我的图表更新”
},
xAxis：{
键入：“日期时间”，
//滴答声间隔：3600*1000，//1小时
min:start_date，//X轴最小数据开始天数，仅限现在
//2天
max:end_date，//X轴日期的最大限制，当前日期
是的，
恩东蒂克：是的，
标题：{
文本：“已执行作业的时间间隔”
},
//标签：{
//格式：“{value}”
// },
},
//亚克斯：{
//标题：{
//文本：“”
//  },
//标签：{
//已启用：false
//
//  },
//最大填充：0.03，
// },
工具提示：{
格式化程序：函数（）{
var日期=新日期（此点x）；
返回“作业运行时：“+date.toString（）+”
”
+“任务Id:“+this.point.taskId+”
”
+“比较计数：”+此点y；
},
//ToDo，将检查是否可以在格式化程序中使用
//是的，
//总部：''，
//点格式：
////'作业运行时：{point.x}'+
//'任务Id:{point.taskId}'+
//'比较Id:{point.compId}'+
//'Compaign count:{point.y}'，
//页脚格式：“”，
//followPointer:true
},
//打印选项：{
//气泡：{
//minSize:10，
//最大尺寸：15，
//  },
//系列：{
//数据标签：{
//启用：对，
//格式：“{point.y}”
//      }
//  }
// },
打印选项：{
专栏：{
点宽度：10
}
},
系列：[{
资料来源：jsonData，
颜色：“绿色”，
点宽度：28
} ]
});

请参考此小提琴链接

在这个小提琴链接中，我有两个数据点的图表，在相同的x轴上，但在不同的y轴上。

在上面的屏幕截图中，可以看到重叠的列

---

非常感谢您的帮助。

您的代码不完整，问题无法重现。请阅读您的起点可以是此小提琴，我可以猜问题在于点宽度太大。感谢morganfree的建议，请使用此更新的小提琴链接[，此处尝试修改pointWidth，但其仍在单列上重叠。您有具有相同x值的点-如果将它们放在同一系列中，它们将在同一位置渲染。如果希望列彼此相邻（具有相同x值的点），你需要把它们放在不同的序列中。但我只会得到一个单一的json数据，这意味着所有的x轴和y轴数据都会被推到一个单一的数据中，我可以将它们分为两个独立的序列。这取决于你的json看起来如何。基本上，你需要循环json并分割数据，这样它们就不会包含重复。