highcharts 基于具有大量数据的条件显示标记

0ve6wy6x  于 2023-01-02  发布在  Highcharts
关注(0)|答案(1)|浏览(139)

我试图用基于条件的标记绘制一个高股价图,数据量很大。你可以假设它是20 k-50 k。通过下面两个jsfidle onetwo
我已经选择了一种绘制图表的方式,让我向您展示几行代码

let mockValue = [
      {
        x: 1671948197800,
        y: 1.102,
        marker: {
          enabled: true
        }
      },
      [1671948197821, 1.103],
      {
        x: 1671948198839,
        y: 1.104,
        marker: {
          enabled: true
        }
      },
      [1671948206861, 2.106],
      {
        x: 1671948199800,
        y: 1.105,
        marker: {
          enabled: true
        }
      },
      {
        x: 1671948200823,
        y: 1.106,
        marker: {
          enabled: true
        }
      },
      {
        x: 1671948201831,
        y: 1.107,
        marker: {
          enabled: true
        }
      },
      [1671948203822, 1.105],
      [1671948204836, 1.106],
      [1671948205861, 1.106]
    ]

   this.options.series[0].data = mockValue;
   this.chart = new StockChart(this.startStopLevelOption);

这是一个模拟数据,我将其传递给options,然后将该选项传递给highstock。我将从数据库中获取数据,我无法在此显示这些数据,但我将以这种格式显示这些数据。当条件满足时,我将创建一个带有标记和颜色的JSON对象,如果条件不满足,我将传递一个数组,其中时间位于0索引中,值位于1索引中。
它在模拟数据上运行得很好,但是当我对大数据做同样的操作时,它没有绘制图表,甚至我也没有得到任何错误。
你能告诉我原因或解决方法吗?我只需要画一个有条件标记的图表。
先谢了

6kkfgxo0

6kkfgxo01#

出于性能原因,Highhcharts引入了turboThreshold。在API中,我们可以读取:

    • 涡轮增压阈值:数量**自2.2.0起

当序列包含的数据数组长于此值时,只允许一维数字数组或具有x和y值的二维数组。此外,只测试第一个点,其余点假定为相同格式。这将节省长序列中昂贵的数据检查和索引。将其设置为0将禁用。

  • 注意:在增强模式下,会强制设置turbo阈值。只允许使用数字数组**或二维数组。默认值为1000。*

因此,要禁用它,请设置:

series: [{
    turboThreshold: 0,
    ...
  }]

另请检查dataGrouping Highstock功能,该功能也会影响启用单点标记的结果。

https://api.highcharts.com/highstock/series.line.turboThreshold
https://api.highcharts.com/highstock/series.line.dataGrouping

相关问题