我正在使用Highcharts api绘制柱形图,
y轴使用整数和x轴时间表。
如果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
} ]
});
请参阅此小提琴链接
在这个小提琴链接中,我有两个数据点的图表,在相同的x轴但不同的y轴上。 https://jsfiddle.net/shrwn1a6/2/
在上面的屏幕截图中,请看重叠的列。
帮助真的很感激。