Question

注意：我已经阅读了这个问题：Highcharts - Dyanmic graph with no initial data

我想要实现的效果类似于：http://jsfiddle.net/7vZ5a/40/。但是，我希望每按一下按钮更新一次，而不是每秒更新一次。这是我到目前为止所得到的： http://jsfiddle.net/7vZ5a/49/

$(function() {
  var chartData = [50, 60, 70, 100, 120, 200];
  var timeStamps = [];
  var index = 1;
  $('#b').click(function() {
    timeStamps.push(new Date());
    var buttonB = document.getElementById('b');
    buttonB.disabled = true;
    if (index < chartData.length) {
      setTimeout(function() {
        if (index == 1) {
          $('#container').highcharts().series[0].addPoint([0, chartData[0]], true, false);
          $('#container').highcharts().series[0].addPoint([index, chartData[index]], true, false);
        } else {
          $('#container').highcharts().series[0].addPoint([index, chartData[index]], true, true);
           index++;
        }
      }, 1000);
    }
    if (index < chartData.length - 1) {
      setTimeout(function() {
        buttonB.disabled = false;
      }, 1500);
    } else {
      setTimeout(function() {
        buttonB.style.visibility = "hidden";
      }, 1500);
    }
    if (index == chartData.length - 2) {
      setTimeout(function() {
        document.getElementById('b').innerHTML = 'Letzte Ziehung';
      }, 1000);
    }
    console.log(timeStamps);
  })
  Highcharts.setOptions({
    lang: {
      decimalPoint: ','
    },
  });
  $('#container').highcharts({
    chart: {
      type: 'line',
      marginBottom: 60
    },
    colors: [
      '#0000ff',
    ],
    title: {
      text: ''
    },
    xAxis: {
      title: {
        text: 'Time',
        offset: 23
      },

      min: 0,
      max: 1,
      tickInterval: 1,
      gridLineWidth: 1

    },
    yAxis: {
      title: {
        text: 'Value'
      },
      min: 0,
      max: 200
    },
    plotOptions: {
      line: {
        marker: {
          enabled: false
        }
      }
    },
    tooltip: {
      formatter: function() {
        return Highcharts.numberFormat(this.y, 2) + 'GE';
      }
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    series: [{
      name: '',
      data: []
    }]
  });
});

为什么（几乎）相同的代码可以在图表自动更新的情况下工作，而不是在点击触发更新的情况下？（我也尝试使用代码控制更新的函数不在“setTimeout”块中，它也没有用。）

Answer 1

您要做的是创建一个向系列添加数据的函数，例如：

function addData(series, data) {
    series.addPoint([series.length, data], true, false);
}

例如，这会将值data的新点添加到series的末尾（索引series.length，这是比该系列的最后一个索引高一个索引）。

然后，您可以将此功能绑定到按钮的click事件：

$('#add-random-data').on('click', function () {
    addData(chart.series[0], Math.random());
});

这会在0和1之间添加一个随机值。假设图表存储在名为chart的变量中，series[0]是您要将数据添加到该图表的系列。

这个fiddle在给定的示例图表上显示了这一点。

您的代码不起作用的原因是您设置了x轴的min和max，如评论中所指出的那样。这样，图表不会绘制超出限制的索引数据。您可以通过删除min和max属性让图表自动缩放其轴。如果您希望值在x轴上始终位于0和1之间，则必须覆盖系列中索引为0和1的点。< / p>

Highcharts：每按一次按钮动态更新图表

1 个答案: