高图:刻度之间的确切距离 [英] Highchart: exact distance between ticks
问题描述
如何使用Highchart找出x轴上两个刻度之间的精确距离或设置精确的距离(以像素为单位)?
How to find out the exact distance or set an exact distance (to pixel) between two ticks on x-axis with Highchart?
我使用了tickPixelInterval，它似乎并没有设置轴上两个刻度之间的确切距离.
I have used tickPixelInterval, it does not seem to set the exact distance between two ticks on an axis.
参考代码: 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: []
}]
});
});
});
推荐答案
如果您控制图表的宽度，并使用边距设置来控制绘图区域的宽度，那么您知道将要有多少滴答声在每个图表中，这都是一件简单的事情.
If you control the width of your chart, and control the width of your plot area using the margin settings, and you know how many ticks you are going to have in each chart, this is a simple matter.
所以，图表1:
width: 200,
margin: [10,25,50,75]
两个插槽，每个插槽50像素宽
Two slots, each 50 pixels wide
图表2:
width: 600,
margin: [10,25,50,75]
10个插槽，每个50像素宽.
10 slots, each 50 pixels wide.
更新的小提琴:
输出:
这篇关于高图:刻度之间的确切距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
