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

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

Answer 1

当您使用

设置setView的{{1}}时

view

等，它看起来像谷歌图表模拟注释的额外列，所以如果你从3列2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" }开始，然后用你的方法添加注释，你最终会有5列：
{{ 1}}

因此，当您尝试使用[Date, Sales, Expenses]接收列名时，由于所有这些模拟注释列，您将（正如您所遇到的那样）有一个高数字的方法。

如果您尝试使用[Dates, Sales, Sales Annotation, Expenses, Expenses Annotation]（将var colname = data.getColumnLabel(col);更改为var colname = view.getColumnLabel(col);，则效果会更好。

我把一个快速的jsfiddle拼凑起来试试：Link。

对于未来的问题，如果您为每个人提供了一个jsfiddle或等效的数据，我们将非常感激，所以我们确信我们正在研究同样的问题： - ）

Google图表选择侦听器返回错误的列号

1 个答案: