Google charts select listener returns wrong column number

问题

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

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.

However, if I don't create a view and direct bind data to the 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?

回答1:

When you're setting the setView of your view with

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

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]

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.

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

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

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

来源：https://stackoverflow.com/questions/31850112/google-charts-select-listener-returns-wrong-column-number