大数据量直线图和dataGrouping的问题

基本需求:

  1. 在一个图里绘制多个实时(+历史)监测数据,间隔一段时间刷新(增加)一批数据
  2. 数据量逐渐增加,每个series数据量可能在几十万量级
  3. y轴左右两边显示都要用到(多坐标轴展示)

目前做法:

  1. 用highcharts line绘图
  2. 打开boost,useGPUTranslations设置为false(true的话在数据点时间戳ms级别且数据点多时显示异常)
  3. 刷新(添加)数据点通过

目前问题:

  1. 数据多以后绘图很慢(开启boost之前用spline更慢且浏览器很容易崩溃)

看highstock有datagrouping功能,但有几个问题

  1. highstock能用多坐标轴展示吗?(部分Series用左侧y轴,部分用右侧y轴)
  2. 直线图的datagrouping approximation回调函数能返回当前group里最大和最小值并在直线图里显示吗?因为在dataGrouping模式下,默认的取平均值会使得历史数据最大最小值丢失
  1. Highstock 支持多轴,这个和 Highcharts 一致,配置参考 Highcharts 的例子
  2. approximation 支持函数,参数是当前分组里的数据数组,函数返回值要求是数值。

DataGrouping 功能的本质就是对大数据量的数据按照一定的方法进行缩减,第 2 点无法满足你需要的返回两个数值的要求,不过你可以根据自己的需求对数据进行处理,自己对你的数据进行分组并取最大值和最小值进行绘图。

谢谢回复。

多轴的问题是:Highcharts的多轴可以左右两边y轴可以用不同的刻度,但Highstock里虽然可以用多轴,但左右两边y轴似乎只能用一个刻度值,当两边数值范围相差较大时无法很好的展示数据范围

DataGrouping的问题是,需求上是希望在全局展示时通过dataGrouping只显示部分数据但保留每个group里最大最小值,在zoom局部放大时能展开细节(仍用同样的方式显示被放大部分的所有数据,如果需要分组也是显示分组中最大最小值),如果按照你说方法自己对数据分组后取最大最小值绘图,在zoom放大时就没法展开细节了。不知道有没有什么好的办法

多轴注意看教程:https://www.highcharts.com.cn/docs/basic-axis#h3-5 (是你的配置问题,并不是 Highstock 和 Highcharts 的不同)

缩放适配的话可以在缩放事件里仅限自定义的 dataGrouping 处理,事件 API:afterSetExtremes,可以参考这个例子:https://www.highcharts.com.cn/demo/highstock/lazy-loading(例子里是后端根据时间范围动态返回数据的,即在后端仅限数据分组,这个可以放在前端 js 里处理)

多轴这个是我没注意设置series的yAxis,不好意思。

缩放适配我试试看 afterSetExtremes