javascript - 热图:附加新数据行

Question

我正在尝试使用 Highcharts 在现有热图实例上添加新数据行。

对我来说，有两种向热图中添加新行的方法:

1. 在顶部
2. 在底部

1.:

由于 Highchart 热图数据结构的设计方式(参见 documentation)，来 self 后端的不同数据点需要在它们的 point.y 属性中递增，因为y 轴值最高的点位于顶部，这就是我们要放置它的位置。

这个方法在我的例子中效果很好，所以当我第二次、第三次……从服务器获取新数据时，我的伪代码看起来像这样:

fetchData(loadIndex)
        .success(function (newData) {
            var numberOfDataRows = newData.z.length;
            var newHighChartData = makeHighchartData(newData);

            var cats = [].concat(chart.yAxis[0].categories);

            newData.y.forEach(function (newCat) {
                cats.push(newCat); // Add new categories at the top the chart aka. end of the array
            });

            chart.update({
                chart: {
                    height: 600 + numberOfDataRows * loadIndex * 30 // Update chart height
                },
                yAxis: {
                    categories: cats
                }
            }, false);

            // Add new data points

            newHighChartData.forEach(function (point) {
                var pointObj = {
                    x: point[0],
                    y: numberOfDataRows * loadIndex + point[1], // add new entry at the top
                    value: point[2]
                };

                chart.series[0].addPoint(pointObj, false, false);
            });

            // Redraw the chart… finally…
            chart.redraw();

            // Increment load index
            loadIndex++;
        });

这是有效的，但我不确定这是否是将新数据附加到热图的最佳方式。

2.:

恕我直言，当我们想要将新数据行添加到图表的末尾(也就是底部)时，事情会变得有点复杂。

据我所知，我们需要更新现有数据的 y 属性，因为它们必须移到顶部，因此我们需要分配更大的属性值。

我通过使用 Highcharts chart.series[0].setData(newData, false, true, true) 几乎可以正常工作，我在其中使用 newData 更新现有数据>(参见我设置为 true 的最后一个参数 updatePoints)和更新的 y 属性。我的版本有点工作，except for the second reload it omits/hides the initally loaded data and I don't know why yet .

但无论如何……我在问自己这是否是预期的思考方式和行动方式？我想念什么吗？一些辅助方法？

有人可以帮助我确定我的想法是否正确，也许有人可以指出一些有值(value)的示例，其中数据附加到热图。我还没有真正找到一个，也没有在 Highcharts 文档网站上找到，这个网站总体来说很棒。

Answer 1

虽然您的第一种方法很好，但在第二种方法中您使用了您不应该使用的 Highcharts 内部对象。

问题是setData()、addPoint()等方法期望纯js对象或数组，但你使用原型(prototype)对象有很多额外的属性 - 导致不良行为。

这里有初始数据:

var data = [
   [0, 0, 1],
   [1, 0, 10],
   [2, 0, 8],
   [0, 1, 4],
   [1, 1, 6.5],
   [2, 1, 12]
];

为图表底部附加新数据的代码:

data = [
 // 1 row
 [0, 0, 5], // new data here
 [1, 0, 10],
 [2, 0, 15],
 //2 row
 [0, 1, 2],
 [1, 1, 4],
 [2, 1, 10]
].concat(data.map(point => [
     point[0], point[1] + 2, point[2] //update old data
]));

   yAxis.setCategories(yAxis.categories.concat([
     categoriesLen + 1,
     categoriesLen + 2
   ]), false);

   chart.series[0].setData(data)

您需要纯数组和对象来更新图表。

示例:https://jsfiddle.net/44p52cha/