Highcharts：热图更新跳过值，隐藏行答案

【问题标题】：Highcharts: heatmap updating skips values, hides rowsHighcharts：热图更新跳过值，隐藏行
【发布时间】：2018-07-06 09:45:04
【问题描述】：

我的网络应用程序必须具有热图，并从服务器更新数据。 Highcharts JS 库可以轻松创建热图，但数据更新会导致错误：跳过第一行，只显示最后 2 个单元格。

我尝试过设置turboThreshold，使用不同的值，保持轴不变，使用字典声明值以及其他一些东西，但这些都没有帮助。我该如何解决这个问题？

// Init works well
var ch1 = Highcharts.chart('chart1', {
    chart: { type: 'heatmap' },
    xAxis: { categories: ['X1', 'X2'] },
    yAxis: { categories: ['Y1', 'Y2'] },
    colorAxis: { minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] },

    series: [{
        name: 'Z', turboThreshold: 0,
        data: [[0, 0, 0], [1, 0, 1], [0, 1, 2], [1, 1, 3]],
        dataLabels: { enabled: true, color: '#000000' }
    }],

    legend: {
        align: 'right', layout: 'vertical',
        margin: 0, verticalAlign: 'top',
        y: 32, symbolHeight: 280
    }
});

// This works wrong
function update() {
    var data = {
        values: [[0, 0, 453], [1, 2, 625], [0, 1, 213], [0, 2, 234]],
        xtitle: 'Sum',
        xnames: ['300-500', '500-700'],
        ytitle: 'Freq',
        ynames: ['0-50', '51-100', '101-200']
    };
    ch1.xAxis[0].setTitle({ text: data.xtitle });
    ch1.yAxis[0].setTitle({ text: data.ytitle });
    ch1.xAxis[0].setCategories(data.xnames, true);
    ch1.yAxis[0].setCategories(data.ynames, true);
    ch1.series[0].setData(data.values);
}

// Change the values
setTimeout(update, 3000);

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

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

【问题讨论】：

标签： javascript charts highcharts heatmap

【解决方案1】：

解决方法是将最后一个参数（名为updatePoints）设置为false：

ch1.series[0].setData(data.values, true, true, false);

这是因为默认情况下setData 会尝试更新现有的值/实体，但我需要完全替换它们。

有用的链接：

【讨论】：