javascript - 为指向 Google DataTable 的链接添加第三列以绘制 ChartWrapper

Question

我正在使用 Google ColumnChart，我想在列上添加链接。但另一方面，我想在此图表上使用 NumberRangeFilter。我设法分别做了这两件事，但我不能把它们放在图表上。原因似乎是我为 DataTable 中的链接添加的第 3 列导致应用程序出错:

One or more participants failed to draw()

All series on a given axis must be of the same data type

这是我尝试过的:

1. 在列上添加链接:

   // Load the Visualization API and the controls package.
   google.charts.load('current', { packages: ['corechart', 'controls'] });
   
   // Set a callback to run when the Google Visualization API is loaded.
   google.charts.setOnLoadCallback(drawChart);
   
   function drawChart() {
   
   // DataTable with 3 columns, and the 2nd is for links
   var dataStats = google.visualization.arrayToDataTable([
       ['Name of X axis', 'link', 'Name of Y axis'],
       // Use of PHP variables
       {% if stats is defined and stats is not null %}
           {% for stat in stats %}
               ['{{ stat['id'] }}', '{{ path('the_path', {'id': stat['id']}) }}', {{ stat['COUNT(*)'] }}],
           {% endfor %}
       {% else %}
           ['0', '{{ path('other_path') }}', 0],
       {% endif %}
   ]);
   
   // Options for the DataTable
   var optionsStats = { 
   // ...
   };
   
   // DataView
   var viewStats = new google.visualization.DataView(dataStats);
   viewStats.setColumns([0, 2]);
   
   // Draw the chart
   var chartStats = new google.visualization.ColumnChart(document.getElementById('stats_div'));
   chartStats.draw(viewStats, optionsStats);
   
   //Listener on the chart
   function selectColumn() {
       window.location = dataStats.getValue(chartStats.getSelection()[0]['row'], 1);
   }
   google.visualization.events.addListener(chartStats, 'select', selectColumn);
   

   它使所有列都可以点击并提供自定义外观。

2. 添加一个过滤器以仅打印一些数据:

   //Dashboard
   var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
   
   //Chart range filter
   var rangeFilter = new google.visualization.ControlWrapper({
       'controlType': 'NumberRangeFilter',
       'containerId': 'control_div',
       'options': {
           'filterColumnIndex': 1 // Should be set to 2 if there is a column 
                                  // for links in the DataTable, to filter values of Y axis
        }
   });
   
   // The chart is now a ChartWrapper to fit in the dashboard
   var chartStats = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'stats_div'
   });
   
   // Establish dependencies
   dashboard.bind(rangeFilter, chartStats);
   
   // Draw the dashboard
   dashboard.draw(dataStats);
   

请注意，ChartWrapper 上没有更多选项，因为它似乎与 ColumnChart 的工作方式不同。

最后，如何在 DataTable 中添加链接列的同时添加范围过滤器？

提前致谢。

Answer 1

首先，您可以在包装器上使用相同的图表选项，
只需分配给包装器的选项属性

你也可以直接在包装器上放置一个 View

要分配您的选择事件，首先监听包装器的就绪事件，
然后使用 --> wrapper.getChart()

在图表上分配选择事件

请看下面的片段...

//Dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

//Chart range filter
var rangeFilter = new google.visualization.ControlWrapper({
  controlType: 'NumberRangeFilter',
  containerId: 'control_div',
  options: {
    filterColumnIndex: 2
   }
});

// The chart is now a ChartWrapper to fit in the dashboard
var chartStats = new google.visualization.ChartWrapper({
  chartType: 'ColumnChart',
  containerId: 'stats_div',
  options: optionsStats,
  view: {
    columns: [0, 2]
  }
});

function selectColumn() {
  window.location = dataStats.getValue(chartStats.getSelection()[0]['row'], 1);
}

google.visualization.events.addListener(chartStats, 'ready', function () {
  google.visualization.events.addListener(chartStats.getChart(), 'select', selectColumn);
});

// Establish dependencies
dashboard.bind(rangeFilter, chartStats);

// Draw the dashboard
dashboard.draw(dataStats);