javascript - 如何通过变量将 JSON 传递给 highchart 热图数据标签？

Question

我有以下生成字符串的代码。我希望将其发送到 highcharts 的数据标签以渲染热图。

  function getData() {
$.ajax({
  type: "GET",
  url: "http://localhost:5000/renderheatmap",
  dataType: 'json'
}).done(function (jsonData) {
  for (var i = 0; i < jsonData.length; i++) {
    fetched_data.push(JSON.stringify(jsonData[i]))
}  
document.getElementById('test_div').innerHTML = "["+fetched_data+"]";

    final_data = "["+fetched_data+"]";


});

}

当我打印 Final_data 时，我得到一个如下所示的字符串:

[[0,0,39],[0,1,39],[0,2,39],[0,3,39],[0,4,39],[0,5,39 ],[0,6,39],[0,7,39],[0,8,39],[0,9,39],[0,10,39],[0,11,39], [1,0,69],[1,1,69],[1,2,69],[1,3,71],[1,4,72],[1,5,72],[1 ,6,73],[1,7,73],[1,8,73],[1,9,73],[1,10,73],[1,11,74],[2,0 ,84],[2,1,84],[2,2,84],[2,3,84],[2,4,84],[2,5,84],[2,6,84 ],[2,7,84],[2,8,84],[2,9,83],[2,10,83],[2,11,84],[3,0,69], [3,1,69],[3,2,69],[3,3,69],[3,4,70],[3,5,72],[3,6,71],[3 ,7,70],[3,8,67],[3,9,64],[3,10,63],[3,11,63],[4,0,60],[4,1 ,60],[4,2,62],[4,3,62],[4,4,61],[4,5,60],[4,6,56],[4,7,55 ],[4,8,49],[4,9,41],[4,10,36],[4,11,34],[5,0,45],[5,1,45], [5,2,41],[5,3,40],[5,4,38],[5,5,33],[5,6,22],[5,7,21],[5 ,8,20],[5,9,14],[5,10,10],[5,11,10],[6,0,26],[6,1,23],[6,2 ,15],[6,3,10],[6,4,10],[6,5,10],[6,6,8],[6,7,7],[6,8,7 ],[6,9,7],[6,10,6],[6,11,5],[7,0,6],[7,1,6],[7,2,6], [7,3,3],[7,4,3],[7,5,3],[7,6,2],[7,7,2],[7,8,2],[7 ,9,2],[7,10,0],[7,11,0],[8,0,2],[8,1,1],[8,2,1],[8,3 ,1],[8,4,0],[8,5,0],[8,6,0],[8,7,0],[8,8,0],[8,9,0 ],[8,10,0],[8,11,0],[9,0,0],[9,1,0],[9,2,0],[9,3,0], [9,4,0],[9,5,0],[9,6,0],[9,7,0],[9,8,0],[9,9,0],[9 ,10,0],[9,11,0]]

如果我在 highcharts 函数中调用此变量，则我无法渲染图表。如果我将这个字符串放在同一个地方，它就会起作用。

以下是代码片段:

这不起作用:

     series: [{
         name: 'Sales per employee',
         borderWidth: 1,

    data: final_data,

    dataLabels: {
       enabled: true,
        color: '#000000'
    }
}]

虽然这有效:

  series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: [[0,0,39],[0,1,39],[0,2,39],[0,3,39],[0,4,39],[0,5,39],[0,6,39],[0,7,39],[0,8,39],[0,9,39],[0,10,39],[0,11,39],[1,0,69],[1,1,69],[1,2,69],[1,3,71],[1,4,72],[1,5,72],[1,6,73],[1,7,73],[1,8,73],[1,9,73],[1,10,73],[1,11,74],[2,0,84],[2,1,84],[2,2,84],[2,3,84],[2,4,84],[2,5,84],[2,6,84],[2,7,84],[2,8,84],[2,9,83],[2,10,83],[2,11,84],[3,0,69],[3,1,69],[3,2,69],[3,3,69],[3,4,70],[3,5,72],[3,6,71],[3,7,70],[3,8,67],[3,9,64],[3,10,63],[3,11,63],[4,0,60],[4,1,60],[4,2,62],[4,3,62],[4,4,61],[4,5,60],[4,6,56],[4,7,55],[4,8,49],[4,9,41],[4,10,36],[4,11,34],[5,0,45],[5,1,45],[5,2,41],[5,3,40],[5,4,38],[5,5,33],[5,6,22],[5,7,21],[5,8,20],[5,9,14],[5,10,10],[5,11,10],[6,0,26],[6,1,23],[6,2,15],[6,3,10],[6,4,10],[6,5,10],[6,6,8],[6,7,7],[6,8,7],[6,9,7],[6,10,6],[6,11,5],[7,0,6],[7,1,6],[7,2,6],[7,3,3],[7,4,3],[7,5,3],[7,6,2],[7,7,2],[7,8,2],[7,9,2],[7,10,0],[7,11,0],[8,0,2],[8,1,1],[8,2,1],[8,3,1],[8,4,0],[8,5,0],[8,6,0],[8,7,0],[8,8,0],[8,9,0],[8,10,0],[8,11,0],[9,0,0],[9,1,0],[9,2,0],[9,3,0],[9,4,0],[9,5,0],[9,6,0],[9,7,0],[9,8,0],[9,9,0],[9,10,0],[9,11,0]],

    dataLabels: {
       enabled: true,
        color: '#000000'
    }
}]

我哪里出错了？ 如何将 Final_data 传递给该系列？

Answer 1

您不是传递 final_data 的 Array，而是作为 String 传递，因此它不起作用!

 var fetched_data = [];

function getData() {
    $.ajax({
        type: "GET",
        url: "http://localhost:5000/renderheatmap",
        dataType: 'json'
    }).done(function(jsonData) {
        for (var i = 0; i < jsonData.length; i++) {
            fetched_data.push(jsonData[i])
        }
      //  document.getElementById('test_div').innerHTML = fetched_data;

      //  final_data = new Array(fetched_data);

        Highcharts.chart('yourid', {

            series: [{
                name: 'Sales per employee',
                borderWidth: 1,

                data: fetched_data,

                dataLabels: {
                    enabled: true,
                    color: '#000000'
                }
            }]

        });


    });

} 

希望这段代码有帮助!!