Question

我正在写信寻求帮助，如何从下面的[name]栏创建多系列折线图。目前，我正在使用[日期]和[标记]点绘制图表。但是，我想为每个名字显示多系列折线图。这是否合理，或者此任务是否需要创建手动功能以与API链接。

请指教。

 function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Tag', 'Date'],
          ['ACCA', 45, 'May 14'],
          ['ABBA', 85, 'May 14'],
          ['ANNA', 100, 'May 14'],
          ['AMMA', 100.5, 'May 14'],
          ['ACCA', 99.5, 'May 15'],
          ['ABBA', 85.5, 'May 15'],
          ['ACCA', 99.6, 'May 15'],
          ['BACM', 94, 'May 15'],
          ['MMBS', 96, 'May 15']
        ]);

        // Define category pickers for 'Name',
        var countryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control1',
            'options': {
                'filterColumnLabel': 'Name',
                'ui': {
                    'labelStacking': 'vertical',
                    'allowTyping': false,
                    'allowMultiple': false
                }
            }
        });

        var barChart = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'chart1',
            'options': {
                'width': 400,
                'height': 300,
                'chartArea': { top: 0, right: 0, bottom: 0 }
            },
            // Configure the Linechart to use columns 2 (Date) and 1 (Tag)
            'view': { 'columns': [2, 1] }
        });

        // Define a table.
        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'chart2',
            'options': {
                'width': '300px'
            }
        });

        new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [barChart, table]).draw(data);
        }

编辑：

enter image description here

感谢。

Answer 1

为了完成这项工作，我建议从仪表板中删除LineChart，并使用Table的“ready”事件来获取过滤后的数据，为图表的view.columns参数创建适当的设置，然后绘制图表使用过滤后的数据：

google.visualization.events.addListener(table, 'ready', function () {
    var filteredData = table.getDataTable();
    // get a list of all the labels in column 0
    var group = filteredData.getDistinctValues(0);

    // build the columns for the view
    var columns = [0];
    for (var i = 0; i < group.length; i++) {
        var label = group[i];
        // set the columns to use in the chart's view
        // calculated columns put data belonging to each country in the proper column
        columns.push({
            type: 'number',
            label: label,
            calc: (function (name) {
                return function (dt, row) {
                    return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
                }
            })(label)
        });
    }
    var view = barChart.getView() || {};
    view.columns = columns;
    barChart.setView(view);
    barChart.setDataTable(filteredData);
    barChart.draw();
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [table]).draw(data);

如何创建多系列折线图

1 个答案: