我创建了一个HighChart ..,但是每隔2个坐标后,它的2个数据坐标在y轴上重叠。
My JSFiddle
我的代码:
$(function () {
var highOptions = {
chart: {
type: 'line',
renderTo: 'container2',
zoomType: 'x',
marginTop: 100
},
title: {
text: 'Score'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
text: 'XXX'
},
categories: [],
labels: {
rotation: 45,
step: 1,
y: 30
}
},
yAxis: [{ // left y axis
title: {
text: 'XXX'
},
min: 0,
max: 9,
plotLines: [{
value: 7.5,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'XXX'
}
}]
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 1);
}
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: []
};
highOptions.xAxis.categories = [0.1003, 0.1006, 0.1008, 1.1010, 1.1011, 1.1012, 1.1013, 2.4];
highOptions.subtitle.text = "XXX:";
chart = new Highcharts.Chart(highOptions);
for (var x = 0; x <= 1; x++) {
var newLP = [];
switch (x) {
case 0:
aName = "One";
newLP.push([0.1004, 4.5]);
newLP.push([0.1008, 1.4]);
newLP.push([1.1012, 5.5]);
newLP.push([1.1014, 2, 6]);
newLP.push([2.4, 8.22]);
break;
case 1:
aName = "Two";
newLP.push([0.1004, 5.52]);
newLP.push([0.1008, 6.16]);
newLP.push([1.1012, 6.34]);
newLP.push([1.1014, 6.69]);
newLP.push([1.1016, 6.36]);
newLP.push([2.4, 7.44]);
break;
}
chart.addSeries({
name: aName,
data: newLP
}, false);
}
chart.redraw();
});
我已经测试了几个数据..仍然重叠..可能是什么问题..
请建议
最佳答案
问题是您在x轴上的点彼此非常接近,好像它们是重叠的。例如,0.1003
非常接近0.1006
,而0.1008
非常接近1.1010
。但是,如果放大,则可以看出它们没有重叠。请参见http://jsfiddle.net/u9xES/555/。
关于javascript - HighChart不规则映射,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24644938/