Как поместить значение из массива в Zingchart.js

Question

Как поместить значение из массива в Zingchart.js

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, у кого есть идеи для меня? Благодарю. https://www.zingchart.com/docs/chart-types/bar-charts/#bar__props_stacked

jane 02 сен. 2017, в 10:42

Источник

Теги:

javascript

arrays

zingchart

1 ответ

Ещё вопросы

dfsq · Accepted Answer · 2017-09-02T06-15-00.000Z

Вы можете сделать что-то вроде этого:

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>

Извините, Как добавить данные из [ { values: [20, 20, 15] } , { values: [0, 30, 25] } ] в [ { values: [20, 20, 15], text : "Alex" } , { values: [0, 30, 25], text : "John" } ]
попробуйте это: xLabels.map(function (key) { return { values: data[key].map(Number), text: key } })
Извините, что беспокою вас снова. Как добавить форматирование чисел запятыми `[{values: [2000, 20, 15], текст:" Alex "}]` в `[{values: [2000, 20, 15], текст:" Alex "}]`