javascript - 制作简单的折线图、索引错误、google可视化

Question

我正在尝试从数据表中绘制折线图。这应该很简单。在我尝试访问电子表格下方的一列之前，折线图绘制得很好。

当我像这样为第二列绘制数据表时，我得到了一个很棒的折线图：

   var costsTable = new google.visualization.DataTable();
          costsTable.addColumn('number', 'colIndex');
          costsTable.addColumn('string', 'colLabel');

             costsTable.addRow([0, data1.getColumnLabel(0)]); //month
             costsTable.addRow([2, data1.getColumnLabel(2)]); //costs

但是当我用第六行替换第二行时：

costsTable.addRow([6, data1.getColumnLabel(6)]); //consumption

我收到此错误：

>  Invalid row index undefined. Should be in the range [0-1].

我不明白是什么导致了这个错误，因为我把 2 作为索引，它工作得很好。

如果我将第二行替换为

costsColumnsTable.addRow([1, data3.getColumnLabel(2)]); //costs

我得到错误：

> Data column(s) for axis #0 cannot be of type string

这对我来说没有意义，如何用索引 2 而不是 6 完美地绘制折线图。

我已经记录了工作数据表的值，它确实分配了给定的索引并接收了指定的列标签。

数据表看起来像：

0, Month
2, Amount Billed

这是我选择的索引和标签。但是，我不能用另一个索引来做到这一点。

这是我的整个图表功能：

function drawElectricalLine(data3){
     var linechartCost = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'line_chart',
          dataTable: data3,
          options: {
              animation:{
                 duration: 1000,
                 easing: 'out',
              },
              width: 800,
              height: 400,
              title: 'Monthly Electric Costs',
             explorer: {},
              hAxis: {
                  title: 'Date'
               },
               vAxis: {
                  title: 'Amount Billed ($)'
                 //' Consumption (kWh)'
               }
          }
      });


      var initState= {selectedValues: []};

      var costsColumnsTable = new google.visualization.DataTable();
      costsColumnsTable.addColumn('number', 'colIndex');
      costsColumnsTable.addColumn('string', 'colLabel');

          costsColumnsTable.addRow([0, data3.getColumnLabel(0)]); //month
          costsColumnsTable.addRow([2, data3.getColumnLabel(2)]); //costs
          //costsColumnsTable.addRow([6, data3.getColumnLabel(6)]); //costs ---> causes error

       initState.selectedValues.push(data3.getColumnLabel(2));

       var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'electrical_selector',
        dataTable: costsColumnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: '',
                caption: 'Consumption',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false
            }
        },
        state: initState
      });     

        setChartView(linechartCost, costsColumnsTable, columnFilter); 

        }//end drawElectricalLine

        function setChartView(linechart, columnsTable, columnFilter) {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });

        linechart.setView(view);
        linechart.draw();
      }

我要做的就是从我的月份列data1.getColumnLabel(0)和消费列中绘制一个基本的折线图data1.getColumnLabel(6) 而且我不明白为什么我不能分配不同的索引而不会出错。

更新：

我将第一列固定为字符串类型。我data1.getColumnLabel(0)的甚至不在索引 1 中 :(

标签： javascriptgoogle-apps-scriptlinechartgoogle-visualization