熱圖：追加新的數據行

Question

我試圖用Highcharts在現有的熱圖實例上添加新的數據行。

對我有添加新行到熱圖的方法有兩種：在底部

1：

由於

1. 頂部
2. 如何設計Highchart熱圖數據結構（參見documentation），來自我的後端的不同數據點需要t o在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性質的現有數據。我的版本有點不錯，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/