高股价图不规则数据得到错误的x刻度

Question

我有不规则的数据。当我使用highcharts:时，图表绘制得很好

$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Volume',
data: chart_arr,
}]
});
});

http://jsfiddle.net/KnTaw/9/

但我有很多数据，所以我需要放大日期并选择高库存。然后发生了一件奇怪的事情：x轴变得非线性。

$(function() {
var chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'chart2'
},
rangeSelector: {
selected: 0
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'val',
data: chart_arr,
type : 'area',
}]
});
});

http://jsfiddle.net/Mc3mW/1/

请注意，1月6日20:00-20:30半小时的数据比1月11-13日的2天分配了更多的空间。(数据当然是一样的。)

如何在高位时强制x轴变为线性？或者如何为高图启用底部缩放工具？非常感谢。

Answer 1

您需要将xAxis.ordinal属性设置为false，默认情况下为true。True值表示点应以固定间隔放置，w.r.t空间(像素)，False将点更改为以固定间隔设置，w.r.t.时间

xAxis: {       
ordinal: false
}

线性x轴|Highstock@jsFiddle

Answer 2

可以使用HighCharts JavaScript库缩放图表。您应该设置的属性是zoomType

决定用户可以通过拖动鼠标缩放的维度。可以是x、y或xy中的一个。默认为"。

在这里你可以看到一个出口。要缩放特定位置，请按住鼠标左键并选择要缩放的区域。

HTML代码：

<div id="container" style="height: 400px"></div>​

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]        
        }]
    });
});​

此外，缩放事件中会自动显示"重置缩放"按钮，按下该按钮时可以轻松操作图表的哪个部分。

无论如何，有关缩放设置、事件和按钮的更多信息和示例，请参阅此处的"Highcharts Options Reference"。只需在搜索中输入"缩放"即可。

至于你的另一个问题："如何使股票图线性化"根据HighStock API，图表的默认类型是线性的。此处发生的情况是由您在series属性中设置的区域选项引起的。只需像这样删除，你就会得到你的线性图表：

$(function() {
var chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'chart2'
},
rangeSelector: {
selected: 0
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'val',
data: chart_arr
}]
});
});