Google 图表 select 监听器 returns 错误的列号

Question

下面是我的 google 图表代码，它在点击时返回错误的列号

function bind()
{
   var data = new google.visualization.DataTable(Json);
   if (data.getNumberOfRows() > 0) {
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                              {
                                  calc: "stringify",
                                  sourceColumn: 1,
                                  type: "string",
                                  role: "annotation"
                              }, 2,
                              {
                                  calc: "stringify",
                                  sourceColumn: 2,
                                  type: "string",
                                  role: "annotation"
                              }
                              , 3,
                              {
                                  calc: "stringify",
                                  sourceColumn: 3,
                                  type: "string",
                                  role: "annotation"
                              }
                              , 4,
                              {
                                  calc: "stringify",
                                  sourceColumn: 4,
                                  type: "string",
                                  role: "annotation"
                              }, 5,
                              {
                                  calc: "stringify",
                                  sourceColumn: 5,
                                  type: "string",
                                  role: "annotation"
                              }
            ]);
        options = {
                width: default_width,
                height: default_height,
                backgroundColor: default_backgroundColor,
                legend: { position: "top" },
                fontName: default_fontName,
                fontSize: default_fontSize,
                chartArea: default_chartArea,
                colors: default_colors
            }
       chart = new google.visualization.ColumnChart(document.getElementById(Control));
       chart.draw(view, options);
       google.visualization.events.addListener(chart, 'select', GetChartOnClickData);
        function GetChartOnClickData() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
             var col = chart.getSelection()[0]['column'];    
             var colname = data.getColumnLabel(col);
        }
}

在 var col 变量中，当我单击最后一列时，列号返回为 9，而我的图表中只有从 0 到 5 的列。

但是，如果我不创建视图并直接将数据绑定到图表

chart.draw(data, options);

它 returns 我正确的列号。我想制作视图以便我可以在图表上显示数字。如何在点击时返回正确的列号？

Answer 1

当您将 view 的 setView 设置为

2, {
    calc: "stringify",
    sourceColumn: 2,
    type: "string",
    role: "annotation"
}

等等，看起来 google 图表为注释模拟了一个额外的列，因此如果您从 3 列开始 [Date, Sales, Expenses] 然后使用您的方法添加注释，您最终将得到 5 列：
[Dates, Sales, Sales Annotation, Expenses, Expenses Annotation]

因此，当您随后尝试使用 var colname = data.getColumnLabel(col); 接收列名称时，由于所有这些模拟注释列，您将（如您所见）有办法获得更高的数字。

如果您尝试使用 var colname = view.getColumnLabel(col);（将 data 更改为 view，效果会更好。

我拼凑了一个快速的 jsfiddle 来尝试一下：Link。

对于以后的问题，如果您提供了一个 jsfiddle 或等价物供大家使用您的数据，我们将不胜感激，因此我们确信我们正在寻找相同的问题:-)

Google 图表 select 监听器 returns 错误的列号

Google charts select listener returns wrong column number

javascript

charts

google-visualization