Я пытаюсь нарисовать линейный график из таблицы данных.Это должно быть довольно просто.Линейный график отрисовывается очень хорошо, пока я не попытаюсь получить доступ к столбцу вниз по электронной таблице.
Когда я рисую таблицу данных для второго столбца, как этот, я получаю потрясающий график:
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 :(