Highcharts，停止动态样条曲线图的渲染

Posted 2021-05-05

我按照HighCharts文档在Angular中创建了一个动态样条曲线图。

我希望图表在单击按钮时停止渲染。

html：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

javascript：

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                        y = Math.random();
                    series.addPoint(y, true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    series: [{
        name: 'Random data',
        data: [12, 27.5, 31.4, 32.1 ]
    }]
});

JSFiddle上的图表示例：

http://jsfiddle.net/cau4mgfp/2/

答案

它可以使用clearInterval()停止

function stopFn() {
  clearInterval(interVal);
}

function startFn() {
  var series = chart.series[0];
  interVal = setInterval(function() {
    y = Math.random();
    series.addPoint(y, true, true);
  }, 1000);
}

var interVal;
var chart;
chart = new Highcharts.chart('container', {
  chart: {
    type: 'spline',
    animation: Highcharts.svg,
    events: {
      load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        interVal = setInterval(function() {
          y = Math.random();
          series.addPoint(y, true, true);
        }, 1000);
      }
    }
  },
  title: {
    text: 'Live random data'
  },
  yAxis: {
    title: {
      text: 'Value'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  series: [{
    name: 'Random data',
    data: [12, 27.5, 31.4, 32.1]
  }]
});

function stopFn() {

  clearInterval(interVal);
}

function startFn() {

  var series = chart.series[0];
  interVal = setInterval(function() {
    y = Math.random();
    series.addPoint(y, true, true);
  }, 1000);
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button onclick="stopFn()">
Stop
</button>
<button onclick="startFn()">
Start
</button>

以上是关于Highcharts，停止动态样条曲线图的渲染的主要内容，如果未能解决你的问题，请参考以下文章

Flask 结合 Highcharts 实现动态渲染图表

如何创建动态更新样条 Highcharts 图表？

在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图

highcharts 动态生成x轴和折线图

Highcharts动态显示多条实时曲线，怎么初始化数据

Highcharts 动态图