[英]Create a Google Chart in javascript with JSON data
I need a column chart data with JSON, in order to automate this chart, but i dont no how do this.我需要一个带有 JSON 的柱状图数据,以便自动化这个图表,但我不知道如何做到这一点。
So this is my JS Code:所以这是我的 JS 代码:
function drawChart() {
const container = document.querySelector('#chart');
let chart = new google.visualization.ColumnChart(container);
//Informações data.json
let dataRequest = new Request("./datas/data.json");
fetch(dataRequest)
.then(function(resp) {
return resp.json();
})
.then(function(data) {
console.log(data);
});
// Informações gráficos
let data = new google.visualization.arrayToDataTable([
["Volume", "Valor"],
["DA", 67],
["CIF", 23],
["Expurgo", 45]
]);
const options = {
titlePosition: 'none',
colors: ['#ed4a0e', '#15466e'],
backgroundColor: 'transparent',
animation: {
startup: true,
duration: 1000,
easing: 'out',
},
hAxis: { textStyle: { color: 'white' }, titleTextStyle: { color: 'white', fontSize: 15 } },
vAxis: { textStyle: { color: 'white' }, titleTextStyle: { color: 'white', fontSize: 15 } },
chartArea: { width: 250, height: 200 },
legend: {
textStyle: { color: '#ffffff', fontSize: 13 }
}
};
chart.draw(data, options)
};
My json:我的json:
[
["Volume", "Valor"],
["DA", 67],
["CIF", 23],
["Expurgo", 45]
]
I never do this before, and need a little help,if someone help whit this (Sorry for my bad english)我以前从未这样做过,如果有人帮忙,我需要一点帮助(对不起,我的英语不好)
Add "false" as last parameter添加“false”作为最后一个参数
var data = google.visualization.arrayToDataTable([
["Volume", "Valor"],
["DA", 67],
["CIF", 23],
["Expurgo", 45]
],
false); // 'false' means that the first row contains labels, not data.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.