Google Charts LineChart的图表范围过滤器 [英] Chart Range Filter for Google Charts LineChart

问题描述

我使用的是Google图表折线图，我在将它绑定到图表范围过滤器时遇到了一些麻烦。

以下是我尝试过的：
容器：

 < div id =dashboard_div> 
 <！ - 将容纳每个控件和图表的div  - > 
< div id =control_divstyle =width：100％; height：100％>< / div> 
< div id =daily_container_count_lineChartstyle =width：100％; height：100％>< / div> 
< / div> 
  

JS部分：

  var chart = new google.visualization.ChartWrapper（{
 chartType：'LineChart'，
 containerId：'daily_container_count_lineChart'，
 options：{
 theme ：'最大化'
} 
}）; 
 
 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

如果我尝试绘制一个没有下面的图表范围过滤器的线形图，它可以很好地处理任何错误：

只绘制一个没有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'）; （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 ++）//我们不希望每日容器表中的'total'行
 {
 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）; 
} 
 
返回数据; 
 
 $ / code> 

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



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





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

干杯。

解决方案

仪表板接受的数据格式与一个普通的图表。

从提供的示例数据中构建一个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 dataOth er = 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（[{列：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（数据）; table.draw（）; }，packages：['controls'，'corechart'，'table']}）;

 < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =dashboard_div> < div id =control_divstyle =width：100％; height：100％>< / div> < div id =daily_container_count_lineChartstyle =width：100％; height：100％>< / div>< / div>< div id =table_div>< / div> code> 

I am using Google Charts Line Charts, I am having some trouble binding it to a Chart Range Filter.

Here is what I have tried: The containers:

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

The JS part:

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

I get the following error in place of the dashboard in the webpage. No error in the console.

One or more participants failed to draw()

You called the draw() method with the wrong type of data rather than a DataTable or DataView

You called the draw() method with the wrong type of data rather than a DataTable or DataView

If I try to just draw a line graph without the chart Range filter like below, it works just fine with out any errors:

Drawing just a line graph without ChartRangeFilter:

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

Loading the data:

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

The data that is returned from above is used to draw the dashboard and and the LineGraph.

My questions is: Why am I getting a wrong data type error when I try to draw the line graph with the ChartRangeFilter, but not when I draw only the line graph

Can I get the ChartRangeFiler to filter 2 graphs(a table and line graph) with different data sources at the same time ?

Cheers.

解决方案

A dashboard accepts the same data format as a regular chart.
Building a DataTable from the sample data provided seems to draw just fine.
Didn't see the load statement, check to see that all the necessary packages are being loaded when drawing the dashboard.

As for second question...
Although you cannot bind a single control to more than one data source, you can use the 'statechange' event to control other sources.

See following example...

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>

这篇关于Google Charts LineChart的图表范围过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！