Question

我正在使用Highchart库显示饼图。我要显示两组数据，并且每隔5秒无限期地在两组数据之间切换。当我加载初始数据集时，图表将按原样显示。当我加载第二组数据（使用while True: try: num1 = float(input("enter_first_number_&_press_enter: ")) break except ValueError: print("invalid_number") op = input("enter_an_operator: ") while True: if op == "+": break elif op == "-": break elif op == "*": break elif op == "/": break else: print("invalid_operator") op = input("enter_an_operator: ") while True: try: num2 = float(input("enter_second_number_&_press_enter: ")) break except ValueError: print("invalid_number") if op == "+": print(num1 + num2) elif op == "-": print(num1 - num2) elif op == "*": print(num1 * num2) elif op == "/": print(num1 / num2)）时，图表会发生应有的变化。但是，随后对setData的所有调用似乎无济于事。我希望图表会一次又一次地更改以对应于新数据。但是什么也没有发生，并且控制台中没有记录任何错误。我可能做错了什么？

这是我的代码：

setData

这是一个完全可用的jsFiddle示例：

https://jsfiddle.net/mspinks/ksd8gjec/23/

在示例中，您会注意到图表最初显示，然后5秒钟后，数据发生变化并反映在图表显示中。但是，数据每5秒再次更改一次，并且这些更改都不会反映在图表显示中。为什么Highcharts在第一次更改后不显示更新的数据？

Answer 1

这似乎是某种bug（？），但是一种变通办法似乎是指定在设置数据时不应更新点。例如（JSFiddle）：

function changeData() {
  if (lastSet == 1){
    // The fourth parameter makes or breaks the update
    chart24HoursTop5.series[0].setData(set2, true, true, false);
    lastSet = 2;
  } else {
    // The fourth parameter makes or breaks the update
    chart24HoursTop5.series[0].setData(set1, true, true, false);
    lastSet = 1;
  }
  setTimeout(changeData, 5000);
}

这确实意味着没有动画，因为这些点被废弃并且创建了新点。但是，似乎确实是这些点的更新似乎完全阻止了更新的发生，因此希望也可以解决主要问题。

Answer 2

为提高性能，Highcharts更改了原始数据数组，这导致变量set1和set2在第一次更新后是相同的。

解决方案可以是通过函数返回数据：

function set1() {
    return [...];
}

function set2() {
    return [...];
}

function changeData() {
    if (lastSet == 1) {
        chart24HoursTop5.series[0].setData(set2());
        lastSet = 2;
    } else {
        chart24HoursTop5.series[0].setData(set1());
        lastSet = 1;
    }
    setTimeout(changeData, 2000);
}

实时演示：https://jsfiddle.net/BlackLabel/0smxjLac/

饼图上的Highcharts setData无法正常工作

2 个答案: