时间戳

首页 > 解决方案 > 具有增强功能的 Highcharts 无法以小间隔正确渲染

javascript - 具有增强功能的 Highcharts 无法以小间隔正确渲染

问题描述

将 Highcharts 与 Highcharts 的 boost 模块结合使用时，在 xAxis 使用较小的 MS 间隔时，图形不会正确呈现。

以 10 毫秒的间隔渲染 5000 条记录，看起来 highcharts 获得了一段时间的平均值（我认为）？悬停标签显示点线的正确位置，而不是直线

在此处输入图像描述 我认为该图在 4999 记录处正确显示： 在此处输入图像描述 同样使用 100.000 记录，但间隔为 1000 毫秒的较低显示正常： 在此处输入图像描述

这个问题只在使用 boost 时出现（我必须使用它，因为我正在处理数百万条记录）。没有提升它工作正常。

我不明白为什么它会这样。这是Highcharts的错误吗？我在我的图表设置中错过了一个角色吗？我怎么解决这个问题？

上面的例子见 jsfiddle：http: //jsfiddle.net/r8Lv41do/49/

我的设置：

Highcharts.chart('container', {
    chart: {
            type: 'line',
        zoomType: 'x'
    },
    xAxis: { type: 'datetime' },
    boost: {
        useGPUTranslations: true
    },
    navigator: {
        enabled: true
    },
    plotOptions: {       
      series: {
        marker: {
          enabled: false,
        }
      }
    },
    tooltip: {
        valueDecimals: 2
    },
    series: [{
        data: data,
    }]
});

标签： javascriptboosthighcharts

解决方案

尝试在不将 useGPUTranslation 设置为 true 的情况下启用提升。例如：

Highcharts.chart('container', {
    chart: {
            type: 'line',
        zoomType: 'x'
    },
    xAxis: { type: 'datetime' },
    // Enables boost without any other performance options
    boost: { },
    navigator: {
        enabled: true
    },
    plotOptions: {       
      series: {
        marker: {
          enabled: false,
        }
      }
    },
    tooltip: {
        valueDecimals: 2
    },
    series: [{
        data: data,
    }]
});

推荐阅读