Google图表选择侦听器返回错误的列数 [英] Google charts select listener returns wrong column number

问题描述

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

Below is my google chart code which is returning wrong column number on click

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的列。

In the var col variable, I get column number returned as 9 when I click the last column, whereas I have only columns only from 0 to 5 in my chart.

chart.draw(data, options);

它返回正确的列号。我想创建视图，以便我可以在图表上显示数字。

it returns me the proper column number. I want to make the view so that I can show numbers on the chart. How can I do it with returning the proper column number on click?

推荐答案

当您设置 $ c
$ b

When you're setting the setView of your view with

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

等，它看起来像google图表模拟一个额外的列注释，所以如果你开始3列 [Date，Sales，Expenses] ，然后使用您的方法添加注释，最后会有5列：
[日期，销售，销售注释，费用，费用说明]

etc, it looks like google charts simulate an extra column for the annotation so if you start with 3 columns [Date, Sales, Expenses] and then add annotations with your method you would end up with 5 columns:
[Dates, Sales, Sales Annotation, Expenses, Expenses Annotation]

因此，当您尝试接收列名称 var colname = data.getColumnLabel ）; 由于所有这些模拟的注释列，您将（因为您遇到）有高数字。

So when you then try to recieve the column name with var colname = data.getColumnLabel(col); you will (as you're experiencing) have a way to high number due to all these simulated annotation columns.

请尝试使用 var colname = view.getColumnLabel（col）; （更改数据到 / code>它会工作更好。

If you instead try with var colname = view.getColumnLabel(col); (change data to view it will work better.

我把一个快速jsfiddle试试： 链接 。

I threw together a quick jsfiddle to try it out: Link.

对于未来的问题，一个jsfiddle或同等级的所有人来玩你的数据，所以我们确定我们看着同样的问题： - ）

For future questions it would be highly appreciated if you provided a jsfiddle or equivalent for everyone to play around with your data, so we're sure that we're looking at the same problem :-)

这篇关于Google图表选择侦听器返回错误的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！