Highstock高级图表不规则数据导致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/

然而，我有大量的数据，因此需要缩放日期并选择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',
    }]
  });
});

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

请注意，时间范围为半小时的数据（Jan 6 20:00-20:30）占用的空间比两天的数据（Jan 11-13）还要大。（当然，这些数据是相同的。）

如何强制高级股票图表（highstock）的x轴变成线性？或者我该如何启用高级图表（highcharts）的底部缩放工具？谢谢。

- Putnik

Answer 1

你需要将xAxis.ordinal属性设置为false，这个属性默认是true。当值为true时，表示点应该根据空间（像素）放置在固定间隔上，而false则表示点应该根据时间放置在固定间隔上。

xAxis: {       
    ordinal: false
}

Highstock中的线性x轴 | jsFiddle

- Jugal Thakkar

---

这是解决这个问题的正确方法吗？ http://stackoverflow.com/questions/25861690/discontinuous-dataset-in-highcharts 我尝试了，但它没有解决问题。 - Pravin

这个选项的名称很奇怪。花了好几个小时才试图得到这种行为，唉。 - Vicky Chijwani

Answer 2

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

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

在这里，您可以看到一个示例here。为了缩放特定的位置，请按住鼠标左键并选择要缩放的区域。

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选项参考”这里。只需在搜索框中输入“缩放”。

至于您的另一个问题：“如何使StockChart线性”，根据HighStock API，图表的默认类型是线性的。这里发生的情况是由于您在系列属性中设置了面积选项。只需像这样删除它，您就可以获得线性图表：

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

- gotqn

---

我知道Zoom机器人，但这不是我想要的。也许有误解：我只是去了我的第二个例子，并删除了“type:'area'”这一行。除了图表将数据表示为线条（而不是区域）之外，没有发生任何事情。这就是你真正想要的吗？ - Putnik