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

Posted 2023-02-16

【中文标题】Highstock highcharts 不规则数据得到错误的x-scale

【英文标题】：Highstock highcharts irregular data gets wrong x-scale

【发布时间】：2012-11-06 11:56:27

【问题描述】：

我有不规则的数据。当我使用 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 轴变为线性？或者如何为高图启用底部缩放工具？谢谢。

【参考方案1】：

可以使用 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，图表的默认类型是线性的。这里发生的事情是由您在 series 属性中设置的 area 选项引起的。像这样删除，你会得到你的线性图表：

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

【讨论】：

我知道缩放机器人这不是我想要的。也可能存在误解：我刚刚转到我的第二个示例并删除了“type：'area'”行。除了图表将数据表示为线（而不是区域）之外，什么都没有发生。真的是你的意思吗？

【参考方案2】：

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

xAxis:        
    ordinal: false

Linear x-axis | Highstock @ jsFiddle

【讨论】：

这也是这个问题的正确解决方案吗？ ***.com/questions/25861690/…我试过了，但没有解决问题。

这个选项有一个奇怪的名字。花了几个小时试图得到这种行为sigh。