Google Charts LineChart 的图表范围过滤器答案

【问题标题】：Chart Range Filter for Google Charts LineChartGoogle Charts LineChart 的图表范围过滤器
【发布时间】：2016-05-01 05:10:00
【问题描述】：

我正在使用 Google Charts 折线图，我无法将其绑定到图表范围过滤器。

这是我尝试过的：容器：

<div id="dashboard_div">
                <!--Divs that will hold each control and chart-->
                <div id="control_div" style="width: 100%; height: 100%"></div>
                <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
            </div>

JS部分：

var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'daily_container_count_lineChart',
    options: {
        theme: 'maximized'
    }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
        filterColumnIndex: 0
    }
});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);

我收到以下错误代替网页中的仪表板。控制台没有错误。

一个或多个参与者绘制失败（）

您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法

您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法

如果我尝试在没有图表范围过滤器的情况下仅绘制折线图，如下所示，它可以正常工作而不会出现任何错误：

不使用 ChartRangeFilter 仅绘制折线图：

var dailyContainerChart = new google.charts.Line(document.getElementById('daily_container_count_lineChart'));
dailyContainerChart.draw(data, {allowHtml: true, width: '100%', height: '100%'});

加载数据：

var getDailyContainerLineData = function (sourceData)
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');

for(k =1;k< sourceData.getNumberOfColumns();k++)
{
    var rowData = new Array();
    var rowStart = sourceData.getColumnLabel(k);
    rowData.push(new Date(rowStart));
    for(l =0;l<sourceData.getNumberOfRows()-1;l++) // we don't want the 'total' row from the daily container table
    {
        var test = sourceData.getValue(l, k);
        if(typeof test === 'string')
        {
            var date = Date.parse(test);
            rowData.push(date);
        }
        else
        {
            rowData.push(test);
        }

    }

    data.addRow(rowData);
}

return data;
}

上面返回的数据用于绘制仪表盘和线图。

我的问题是：为什么我尝试使用 ChartRangeFilter 绘制折线图时出现错误的数据类型错误，而仅绘制折线图时却没有

我可以让 ChartRangeFiler 同时过滤具有不同数据源的 2 个图表（表格和折线图）吗？

干杯。

【问题讨论】：

data 是在哪里定义的，你能分享一个示例吗？
添加了线图的屏幕截图，因为它在没有图表控制器的情况下生成，并将图表的源数据作为谷歌图表表。如果您需要更多信息，请告诉我。
对不起，我想看看你在哪里加载 data - 它应该以相同的方式用于图表和仪表板。但错误听起来像是在传递常规数组而不是 DataTable 或 DataView...？
这是一个数据表。增加了加载数据的方法。

标签： javascript google-visualization

【解决方案1】：

仪表板接受与常规图表相同的数据格式。
从提供的示例数据构建 DataTable 似乎很好。
没有看到加载语句，请检查是否在绘制仪表板时正在加载所有必要的包。

至于第二个问题...
虽然您不能将单个控件绑定到多个数据源，但您可以使用'statechange' 事件来控制其他数据源。

看下面的例子……

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'VIC - STH CRT');
    data.addColumn('number', 'NSW - MINTO');
    data.addColumn('number', 'QLD - PINKENBA');
    data.addColumn('number', 'WA - HAZELMERE');

    data.addRow([new Date('04/01/2001'), 3, 4, 7, 6]);
    data.addRow([new Date('04/02/2001'), 0, 9, 8, 7]);
    data.addRow([new Date('04/03/2001'), 9, 9, 0, 7]);
    data.addRow([new Date('04/04/2001'), 5, 5, 5, 2]);
    data.addRow([new Date('04/05/2001'), 6, 7, 1, 1]);
    data.addRow([new Date('04/06/2001'), 4, 4, 1, 9]);
    data.addRow([new Date('04/07/2001'), 4, 5, 9, 0]);

    var dataOther = new google.visualization.DataTable();
    dataOther.addColumn('date', 'Date');
    dataOther.addColumn('number', 'HLS - FLORENCE');
    dataOther.addColumn('number', 'FGT - GAY');
    dataOther.addColumn('number', 'KNX - FULTON');
    dataOther.addColumn('number', 'TN - VOLS');

    dataOther.addRow([new Date('04/01/2001'), 1, 8, 5, 2]);
    dataOther.addRow([new Date('04/02/2001'), 2, 9, 6, 3]);
    dataOther.addRow([new Date('04/03/2001'), 3, 0, 7, 4]);
    dataOther.addRow([new Date('04/04/2001'), 4, 1, 8, 5]);
    dataOther.addRow([new Date('04/05/2001'), 5, 2, 9, 6]);
    dataOther.addRow([new Date('04/06/2001'), 6, 3, 0, 7]);
    dataOther.addRow([new Date('04/07/2001'), 7, 4, 1, 8]);

    var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'daily_container_count_lineChart',
      options: {
        theme: 'maximized'
      }
    });

    var control = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'control_div',
      options: {
        filterColumnIndex: 0
      }
    });

    var table = new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'table_div',
      dataTable: dataOther,
      options: {
        sortColumn: 1
      }
    });

    google.visualization.events.addListener(control, 'statechange', function () {
      var state = control.getState();
      var view = new google.visualization.DataView(dataOther);
      view.setRows(view.getFilteredRows([{column: 0, minValue: state.range.start, maxValue: state.range.end}]));
      table.setDataTable(view);
      table.draw();
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);
    table.draw();
  },
  packages: ['controls', 'corechart', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="control_div" style="width: 100%; height: 100%"></div>
  <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
</div>
<div id="table_div"></div>

【讨论】：