Javascript 为Google数据表的链接添加第三列，以便绘制图表包装器

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

一个或多个参与者未能绘制（）

给定轴上的所有系列必须具有相同的数据类型

以下是我尝试过的：

在列上添加链接：

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

它使所有列都可单击，并提供自定义外观

添加筛选器以仅打印某些数据：

//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中添加链接列，同时添加范围筛选器

---

提前感谢。

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

也可以直接在包装器上放置视图

要分配select事件，请首先侦听包装器的就绪事件，
然后使用-->

wrapper.getChart（）在图表上分配select事件

请参阅以下代码段

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

谢谢，这很有帮助，但并不完全有效：当我点击一个专栏时，视觉效果很好，过滤效果很好，但重定向效果不好。。。这个事件似乎被考虑在内了，因为当我点击一个列时，我无法选择任何其他列，但它不会出现在网页上。我已经验证过，如果我删除修改，它就可以工作，因此它不会来自我在DataTable中放置的路径。最后，当我将getChart（）放在selectColumn函数中时，它对我起了作用：dataStats.getValue（chartsStats.getChart（）.getSelection（）…），只让chartStats放在addListener（）中。