javascript Highstock highcharts 不规则数据得到错误的 x 尺度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13438937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highstock highcharts irregular data gets wrong x-scale
提问by Putnik
I have irregular data. Chart draws well when I use highcharts:
我有不规则的数据。当我使用highcharts时，图表绘制得很好：
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Volume',
data: chart_arr,
}]
});
});
But I have a lot of data so I need to zoom on the date and choose highstock. Then a strange thing happens: the x-axis become non-linear.
但是我有很多数据，所以我需要放大日期并选择highstock。然后奇怪的事情发生了：x 轴变成非线性。
$(function() {
var chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'chart2'
},
rangeSelector: {
selected: 0
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'val',
data: chart_arr,
type : 'area',
}]
});
});
Please note that the data for half an hour range Jan 6 20:00-20:30 allocates more space than 2 days Jan 11-13. (Of course the data is the same.)
请注意，1 月 6 日 20:00-20:30 半小时范围内的数据比 1 月 11-13 日 2 天分配的空间更多。（当然数据是一样的。）
How can I force x-axis at highstock to become linear? Or How can I enable a bottom zoom tool for highcharts? Thank you.
如何强制高库存的 x 轴变为线性？或者如何为 highcharts 启用底部缩放工具？谢谢你。
回答by Jugal Thakkar
You will need to set the xAxis.ordinalproperty to false, this is trueby default. Truevalue indicates the points should be placed at fixed intervals w.r.t space (pixels), and Falsechanges points to be placed at fixed intervals w.r.t. time
您需要将该xAxis.ordinal属性设置为false，这是true默认设置。Truevalue 表示点应该以固定间隔 wrt space (pixels)False放置，并更改点以固定间隔 wrt time
xAxis: {
ordinal: false
}
回答by gotqn
It is possible to zoom your chart using HighCharts JavaScript library. The property that you should set is zoomType
可以使用 HighCharts JavaScript 库缩放图表。您应该设置的属性是zoomType
Decides in what dimentions the user can zoom by dragging the mouse. Can be one of x, y or xy. Defaults to "".
决定用户可以通过拖动鼠标缩放的尺寸。可以是 x、y 或 xy 之一。默认为“”。
Here you can see an exmaple here. In order to zoom a specific place, hold the mouse left button and select the area you want to zoom.
在这里你可以看到一个〔实施例这里。要缩放特定位置，请按住鼠标左键并选择要缩放的区域。
HTML code:
HTML代码：
<div id="container" style="height: 400px"></div>?
JavaScript code:
JavaScript 代码：
$(function () {
? ??var chart = new Highcharts.Chart({
? ? ? ??chart: {
? ? ? ? ? ??renderTo: 'container',
? ? ? ? ? ??type: 'line',
? ? ? ? ? ??zoomType: 'x'
? ? ? ??},
? ? ? ??
? ? ? ??xAxis: {
? ? ? ? ? ??categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
? ? ? ??},
? ? ? ??
? ? ? ??series: [{
? ? ? ? ? ??data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]? ? ? ??
? ? ? ??}]
? ??});
});?
Also, a "Reset zoom" button is automatically shown on zoom event and it's easy to manipulated what part of the chart will be shown when it is pressed.
此外，在缩放事件时会自动显示“重置缩放”按钮，并且很容易操纵按下该按钮时将显示图表的哪个部分。
Anyway, for more information and examples of zoom settings, event and the button you should refer to "Highcharts Options Reference" here. Just enter "zoom" in the search.
无论如何，有关缩放设置、事件和按钮的更多信息和示例，您应该参考此处的“Highcharts 选项参考” 。只需在搜索中输入“缩放”即可。
As to your other question: "How to make the StockChart linear" according to HighStock API the default type of the chart is linear. What is happening here is caused by the areaoption that you have set in the series property. Just remove in like this and you will get your linear chart:
至于您的另一个问题：根据 HighStock API，“如何使 StockChart 呈线性”，图表的默认类型是线性的。这里发生的事情是由您在系列属性中设置的区域选项引起的。像这样删除，你会得到你的线性图表：
$(function() {
var chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'chart2'
},
rangeSelector: {
selected: 0
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'val',
data: chart_arr
}]
});
});
