文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将数组的值赋值到Zingchart.js

问如何将数组的值赋值到Zingchart.js
EN

Stack Overflow用户

提问于 2017-09-02 08:26:37

回答 1查看 384关注 0票数 1

我想在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，谁对我有什么想法？谢谢。stacked

stacked-chart

zingchart

javascript

arrays

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-02 08:40:22

你可以这样做：

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46011920

复制

相似问题

问如何将数组的值赋值到Zingchart.js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将数组的值赋值到Zingchart.jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将数组的值赋值到Zingchart.js
EN