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/

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

如何强制高纬度的x轴变为线性？或者如何为highcharts启用底部缩放工具？谢谢。

Answer 1

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

xAxis: { ordinal: false }

<强> Linear x-axis | Highstock @ jsFiddle

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

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

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

Highstock highcharts不规则数据错误x-scale

2 个答案: