javascript - Highcharts，将总数据显示为实时流

Question

我正在尝试做的事情很有趣，但我正在努力推进我的想法:

我做了什么:

我有一个包含 100 个数据集的 CSV 文件。这些数据集是我在 Y 轴上绘制的点。

所有 100 个点都按预期绘制在 HighCharts 图表上，如下图所示:

代码:

下面是我用来得到上面结果的代码:

$.get('abc.csv', function(data) {
    var lines = []
    lines = data.split('\n');
    var ppgData=[];

    $.each(lines, function(ppgNo, ppgContent) {
        if (ppgNo >= 0) {
            ppgData[ppgNo - 0] = parseFloat(ppgContent.substring(ppgContent.lastIndexOf(',') + 1));
        }
    });

    Highcharts.chart('ppg', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'ECG Data'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            crosshair: false
        },
        yAxis: {
            title: {
                text: 'ECG Peaks'
            }
        },
        tooltip: {
            enable: false
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '',
            lineWidth: 1,
            data: ppgData,
            animation: {
                duration: 15000
            }
        }]
    });
});

我想要实现的目标:

1. 我只想显示图表上的前 10 个点。

2. 我想通过删除最后 10 个图直到达到所有 100 个点，以 10 个 10 个补丁但在同一个图表中显示其他数据。

在 Highcharts 中使用 JavaScript 这可能吗？如果是这样，请建议我该怎么做？

非常感谢任何帮助。

这是有效的 JS fiddle 。

https://jsfiddle.net/abnitchauhan/3vj2afnt/

Answer 1

有点像，但很管用。

1. 使用 scrollablePlotArea 选项让图表可以滚动。
2. 使用 overflow: hidden 将图表包裹在 div 中以隐藏滚动条。
3. 运行脚本来制作滚动动画

var xValues = [];
xValues = [1, 4, 3, 9, 3, 4, 4, 6, 4, 5, 3, 4, 3, 3, 1, 3, 2, 3, 2, 3, 4, 4, 3, 3, 4, 3, 5, 3, 6, 7, 3, 2, 5, 7, 4, 6, 7, 3, 6, 7, 4, 7, 4, 7, 3, 2, 5, 6, 7, 4, 3, 4, 6, 6, 7, 4, 6, 6, 7, 3, 6, 7, 3, 2, 4, 5, 6, 5, 9, 8, 4, 6, 2, 1, 5, 8, 5, 8, 2, 6, 3, 8, 4, 7, 3, 6, 1, 5, 8, 0, 2, 4, 7, 5, 8, 3, 7, 9, 3, 7];

const drawAnimationDuration = 5000;

Highcharts.chart('ppg', {
  chart: {
    type: 'line',
    // use that option to let the rest of the chart be scrollable. Play with the "minWidth" value if you need
    scrollablePlotArea: {
      minWidth: 800,
      scrollPositionX: 0
    }
  },
  title: {
    text: 'ECG Data'
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    crosshair: false
  },
  yAxis: {
    title: {
      text: 'Peaks'
    }
  },
  tooltip: {
    enable: false
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: '',
    lineWidth: 2,
    data: xValues,
    animation: {
      duration: drawAnimationDuration
    }
  }]
});

// wait for the chart to done the animation.
// play with the second parameter (duration) of the `.animate` function (currently is 10000) to accelerate or slow down. For more info: https://api.jquery.com/animate/#duration
setTimeout(() => {
  $('.highcharts-scrolling').animate({
    scrollLeft: $('.highcharts-container').width()
  }, 10000, 'linear');
}, drawAnimationDuration)

#ppg {
  max-width: 800px;
  min-width: 320px;
  height: 400px;
  width: 400px;
}

.ppg-wrapper {
  /* hide the child's scrollbar */
  overflow-y: hidden;
  height: 400px;
}

<div class="ppg-wrapper">
  <div id="ppg"></div>
</div>