Google 图表呈现空图表添加行（）错误

Question

我有一个 JavaScript 数组，如下所示：

[
{x: "Station a", y: -77.33333333333333},
{x: "Station b", y: -19},
{x: "Station c", y: 9.492537313432836},
...
]

我想使用 Google 图表创建条形图。下面的代码给我一个空图表……没有柱状图。 x-value 应该是标签，y-value 在图表中创建条形图。我是否必须手动将数组值推入数据 table？如果是这样，这将如何完成？这是代码的摘录，n 是 JavaScript 数组：

// load necessary google charts libraries
google.charts.load("visualization", "1", {'packages':["corechart"]});
google.charts.load('current', {'packages':['bar']});

function plot1() {
        var dataPoints = []; // temporary array
        var n = []; // final array with data
        
        var chartData = new google.visualization.DataTable();
        chartData.addColumn('string', 'Station');
        chartData.addColumn('number', 'Arrival');
        
        n.forEach(function (row) {
            chartData.addRow([row.x, row.y]);
        });
        
        url = // localhost url with json data
        
        // push json data to array
        function addData(data) {
            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < data[i].delays.length; j++) {
                    dataPoints.push({
                        x: data[i].delays[j].Station,
                        y: data[i].delays[j].Arrival
                    });
                }
            }
            
            // filter "no information" values from array
            values = ["no information"]
            dataPoints = dataPoints.filter(item => !values.includes(item.y));
            
            // eliminate duplicates of x and get average of the y values
            const map = new Map();
            dataPoints.forEach(({ x, y }) => {
                const [total, count] = map.get(x) ?? [null, 0];
                map.set(x, [(total ?? 0) + parseInt(y), count + 1]);
            });
            
            // final array with data in desired format
            n = [...map].map(([k, v]) => ({ x: k, y: v[0] / v[1] }));
            
            console.log(n);
        }
        
        $.getJSON(url, addData);

        var options = {
            width: 700,
            legend: { position: 'none' },
            chart: {
            title: 'Verteilung der Verspätungen bei Ankunft (in Sekunden)'},
            axes: {
                x: {
                0: { side: 'top', label: 'Stationen'} // Top x-axis.
                }
            },
            bar: { groupWidth: "90%" }
                };
        
        var chart = new google.charts.Bar(document.getElementById('plot1'));
        chart.draw(chartData, google.charts.Bar.convertOptions(options));
    };

google.charts.setOnLoadCallback(plot1);

在HTMLheader我指定了

<script src = "http://code.jquery.com/jquery-latest.js"></script>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

arrayToDataTable 需要一个简单的 two-dimensional 数组，只有内在值。
列标题作为第一行。

var data = google.visualization.arrayToDataTable([
  ['Station', 'Arrival'],
  ['Station a', -77.33333333333333],
  ['Station b', -19],
]);

您可以找到详细信息 here。

它returns完整的数据table，所以以后就不需要再用addColumn了。

-- 或--

您可以创建空白数据 table，然后添加列和行。

var data = new google.visualization.DataTable();
data.addColumn('string', 'Station');
data.addColumn('number', 'Arrival');

n.forEach(function (row) {
  data.addRow([row.x, row.y]);
});

编辑

$.getJSON 异步运行。所以你必须等到它完成，
在数据可用之前。

将循环移动到 addData 的末尾。
然后在数据准备好后绘制图表。

注意：您不需要第一个 load 语句。

请参阅以下代码片段...

google.charts.load('current', {
  packages: ['bar']
}).then(plot1);

function plot1() {
    var dataPoints = []; // temporary array
    var n = []; // final array with data

    var chartData = new google.visualization.DataTable();
    chartData.addColumn('string', 'Station');
    chartData.addColumn('number', 'Arrival');

    url = // localhost url with json data

    // push json data to array
    function addData(data) {
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data[i].delays.length; j++) {
                dataPoints.push({
                    x: data[i].delays[j].Station,
                    y: data[i].delays[j].Arrival
                });
            }
        }

        // filter "no information" values from array
        values = ["no information"]
        dataPoints = dataPoints.filter(item => !values.includes(item.y));

        // eliminate duplicates of x and get average of the y values
        const map = new Map();
        dataPoints.forEach(({ x, y }) => {
            const [total, count] = map.get(x) ?? [null, 0];
            map.set(x, [(total ?? 0) + parseInt(y), count + 1]);
        });

        // final array with data in desired format
        n = [...map].map(([k, v]) => ({ x: k, y: v[0] / v[1] }));

        console.log(n);

        n.forEach(function (row) {
            chartData.addRow([row.x, row.y]);
        });


        var options = {
            width: 700,
            legend: { position: 'none' },
            chart: {
            title: 'Verteilung der Verspätungen bei Ankunft (in Sekunden)'},
            axes: {
                x: {
                0: { side: 'top', label: 'Stationen'} // Top x-axis.
                }
            },
            bar: { groupWidth: "90%" }
                };

        var chart = new google.charts.Bar(document.getElementById('plot1'));
        chart.draw(chartData, google.charts.Bar.convertOptions(options));

    }

    $.getJSON(url, addData);

};

Google 图表呈现空图表添加行（）错误

Google Charts Rendering Empty Chart addRows() Errror

html

javascript

charts

google-visualization

react-google-charts