Question

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

对我来说，有两种方法可以向热图添加新行：

位于顶部
在底部

1：

由于Highchart热图数据结构的设计原因（参见documentation），来自我后端的不同数据点需要在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来更新现有数据，并使用updatePoints（参见我设置为true的最后一个参数y）和更新的{{} 1}}属性。我的版本有点工作，except for the second reload it omits/hides the initally loaded data and I don't know why yet。

但无论如何......我在问自己，这是否是想要做的事情？我错过了什么吗？一些辅助方法？

有人可以帮助我，我的想法是否正确，也许有人可以指出一些有价值的例子，其中数据被附加到热图。我还没有真正找到一个，也不是在Highcharts文档网站上，这个网站很棒。

Answer 1

虽然你的第一种方法很好，但在第二种方法中你使用的是Highcharts内部对象，你不应该这样做。

问题是像setData()，addPoint()等方法期望纯js对象或数组，但是你使用具有许多附加属性的原型对象 - 这会导致不希望的行为。

这里有初始数据：

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/

热图：附加新数据行

1 个答案: