簡體   English   中英

使用 JSON 數據在 JavaScript 中創建 Google 圖表

[英]Create a Google Chart in javascript with JSON data

我需要一個帶有 JSON 的柱狀圖數據,以便自動化這個圖表,但我不知道如何做到這一點。

所以這是我的 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)
};

我的json:

[
    ["Volume", "Valor"],
    ["DA", 67],
    ["CIF", 23],
    ["Expurgo", 45]
]

我以前從未這樣做過,如果有人幫忙,我需要一點幫助(對不起,我的英語不好)

添加“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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM