如何使用 Highchart 找出 x 轴上两个刻度之间的精确距离或设置精确距离(到像素)？
我使用了tickPixelInterval，它似乎没有设置轴上两个刻度之间的精确距离。
引用代码:http://jsfiddle.net/e0qxfLtt/21/
$(function drawCharts() {
var chartData = [100, 120, 120, 140, 110, 110];
var index = 1;
$('#b').click(function() {
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if (index < chartData.length) {
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1]]);
$('#container').highcharts().series[0].addPoint([chartData[index]]);
setTimeout(function() {
if (index === 1) {
$('#container1').highcharts().series[0].addPoint([0, chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x, y]);
index++;
}, 2000);
}
setTimeout(function() {
buttonB.disabled = false;
}, 3000);
})
$(document).ready(function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10
},
yAxis: {
title: {
text: ''
},
min: 0,
max: 200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 2) + 'GE';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg ? {
duration: 2000
} : false, // don't animate in old IE marginRight: 10,
events: {
load: function() {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min: 0,
max: 200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: '',
data: []
}]
});
});
});
最佳答案
如果您控制图表的宽度，并使用边距设置控制绘图区域的宽度，并且您知道每个图表中将有多少个刻度，那么这是一件简单的事情。
所以，图表 1:
width: 200,
margin: [10,25,50,75]
两个插槽，每个 50 像素宽
图表2:
width: 600,
margin: [10,25,50,75]
10 个槽，每个槽 50 像素宽。
更新了 fiddle :
输出:
关于javascript - Highcharts : exact distance between ticks，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38898218/