Question

我正在使用Zingcharts显示热图图表。

我已经在jquery中动态设置了我的heatmap div。

if(type == "heatmap"){
    ...
    ....
    heatmap_html += `<div id="myChart"> </div>`;
    $('.'+cc).html(heatmap_html);
    ...
    ....
}

并且正在执行JSON调用以获取所需的数据，

sad = ['A', 'AAPL', ...]

for(var i=0; i<sad.length; i++){
stocks_array.push(sad[i]);
urlsd = "https://api.iextrading.com/1.0/stock/" + sad[i] + "/chart/1d";
$.ajaxSetup({
    async: false
});

$.getJSON(urlsd, function(data) {
  for(var j=0; j<=data.length; j++){
    dates_array.push(data[j]['date']);
    console.log(data[j]['high']);
  }
});
}

能够通过创建2个数组（dates_array和stocks_array）并将数据存储在其中来设置x和y轴的标签，但是无法对序列数据进行动态处理在图表中，它必须具有的数据为data[j]['high']。没有找到动态设置它们的方法。甚至zingchart文档也没有显示任何帮助。

和Zing图表配置

var myConfig = {
  "type": "heatmap",
  "plotarea" : {
    "margin" : 70
  },
  "plot":{
    "aspect":"none",
    "border": '1px solid white',
    "rules":[
      {
        "rule":"%v >= 50",
        "background-color":"#4CAF50"
      },
      {
        "rule":"%v < 50 && %v >= 30",
        "background-color":"#FFEB3B"
      },
      {
        "rule":"%v < 30",
        "background-color":"#F44336"
      }
    ]
  },
  "scale-x": {
    "labels": dates_array
  },
  "scale-y":{
    "labels": stocks_array
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
};
zingchart.render({ 
  id : 'myChart', 
  data : myConfig, 
  height : "100%", 
  width: "100%" 
});

如何动态设置系列数据？

0 个答案: