Создание простой линейной диаграммы, ошибка индекса, визуализация Google - PullRequest
0 голосов
/ 12 декабря 2018

Я пытаюсь нарисовать линейный график из таблицы данных.Это должно быть довольно просто.Линейный график отрисовывается очень хорошо, пока я не попытаюсь получить доступ к столбцу вниз по электронной таблице.

Когда я рисую таблицу данных для второго столбца, как этот, я получаю потрясающий график:

   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, но не шесть.

Я записал значения рабочей таблицы данных, и она действительно присваивает заданные индексы и получает указанную метку столбца.

Таблица данных выглядит следующим образом:

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 :( enter image description here

enter image description here

...