Question

我正在使用Google Charts Line 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;
}

从上面返回的数据用于绘制仪表板和LineGraph。

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

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

干杯。

Answer 1

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

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

参见以下示例...

＆＃13;

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']
});

＆＃13;

<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>

＆＃13;

Google Charts LineChart的图表范围过滤器

1 个答案: