37

我有不规则的数据。当我使用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/

请注意，1 月 6 日 20:00-20:30 半小时范围内的数据分配的空间比 1 月 11-13 日的 2 天多。（当然数据是一样的。）

如何强制高库存的 x 轴变为线性？或者如何为高图启用底部缩放工具？谢谢你。

4

2 回答 2

59

您需要将xAxis.ordinal属性设置为false，这是true默认设置。Truevalue 表示点应该以固定间隔放置在空间（像素）中，并更改点False以固定间隔放置 wrt

xAxis: {       
    ordinal: false
}

线性 x 轴 | Highstock @ jsFiddle

于 2012-11-18T10:23:57.593 回答
0

可以使用 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 选项参考” 。只需在搜索中输入“缩放”即可。

至于您的另一个问题：根据 HighStock API，“如何使 StockChart 成为线性”图表的默认类型是线性的。这里发生的事情是由您在 series 属性中设置的area选项引起的。像这样删除，你会得到你的线性图表：

$(function() {
  var chart2 = new Highcharts.StockChart({
    chart: {
      renderTo: 'chart2'
    },
    rangeSelector: {
      selected: 0
    },
    xAxis: {
      type: 'datetime'
    },
    series: [{
      name: 'val',
      data: chart_arr
    }]
  });
});
于 2012-11-18T09:54:06.353 回答