如何将价值从数组到Zingchart.js

我想在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"]
           }

我想将值放在数do 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

您可以做这样的事情：

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>

相关内容

最新更新

热门标签：