如何将数组中的值放入 Zingchart.js

Question

我想在 Zingchart.js 中创建堆叠条形图并且我的数据为：

var data = [{
  month : 1,
  name : 'Alex',
 count : '20'
 },
 {
 month : 2,
  name : 'Alex',
 count : '20'
 } ,
 {
 month : 2,
  name : 'John',
 count : '30'
 } ,
 {
 month : 2,
  name : 'Jane',
 count : '25'
 } ,
 {
 month : 3,
  name : 'Alex',
 count : '15'
 } ,
 {  
 month : 3,
  name : 'John',
 count : '25'
 } ,
 {
 month : 3,
  name : 'Jane',
 count : '23'
 } 
}]

我将数据转换为：

var data = {  "Alex" : ["20", " 20", "15"],
              "John" : ["0", "30", "25" ],
              "Jane" : ["0", "25", "23"]
           }

我想将数组中的值放入 Zingchart.js 以创建堆积条形图以及将值放入 zingchart 的示例：

var myConfig = {
  type: "bar",
  plot:{
    stacked:true,
    stackType:"normal"
  },
  "scale-x": { 
            "labels": ["1","2","3"],
            "label":{"offsetY": 5,
                    "text": "Month",
                    "fontColor": "#777",
                    "fontSize": 14
   }
  },
  series:[
    {
      values: [20, 20, 15]
    },
    {
      values:[0, 30, 25 ] 
    },
    {
      values: [0, 25, 23] 
    }
  ]
};
 
zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: "100%", 
 width: "100%" 
});

html, body, #myChart {
  width:100%;
  height:100%;
}

<!DOCTYPE html>
<html>
 <head>
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
  <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

如何将数组中的值赋值给zingchart.js，谁有什么想法？谢谢。 https://www.zingchart.com/docs/chart-types/bar-charts/#bar__props_stacked

Answer 1

你可以这样做：

var xLabels = Object.keys(data)

var yValues = xLabels.map(function (key) {
  return {
    values: data[key].map(Number)
  }
})

看看这个演示：

var data = {
  "Alex": ["20", " 20", "15"],
  "John": ["0", "30", "25"],
  "Jane": ["0", "25", "23"]
}

var xLabels = Object.keys(data)

var series = xLabels.map(function (key) {
  return {
    values: data[key].map(Number)
  }
})

var myConfig = {
  type: "bar",
  plot: {
    stacked: true,
    stackType: "normal"
  },
  "scale-x": {
    "labels": xLabels,
    "label": {
      "offsetY": 5,
      "text": "Month",
      "fontColor": "#777",
      "fontSize": 14
    }
  },
  series: series
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: "100%",
  width: "100%"
});

html,
body,
#myChart {
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
  </script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

如何将数组中的值放入 Zingchart.js

How to put value from array to Zingchart.js

javascript

arrays

stacked-chart

zingchart