我按照谷歌图表教程制作了一个ControlWrapper驱动器两个图表，我准备了一个包含4列的数据集：
data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'col3');
然后我用ChartWrapper设置了两个图表：
chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1div',
'options': {
title: 'Chart1',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out',
"startup": true
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0, 1]}
});
chart2 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart2div',
'options': {
title: 'chart2',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out',
"startup": true
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0,2]}
});
然后：
timeRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'curveType': 'function',
'chartArea': {'width': '90%'},
//'hAxis': {'baselineColor': 'none'}
'hAxis': {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
},
'chartView': {
'columns': [0, 1, 2, 3]
},
'minRangeSize': 43200000
}
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(timeRangeSlider, [chart, chart2]);
dashboard.draw(data);
但我得到Invalid column index 2. Should be an integer in the range [0-1]第二张图表并且我不知道为什么，因为在数据集中有4列所以必须存在列索引2！
有人经历过这样的事吗？
答案 0 :(得分：2)
在启动时使用与动画相结合的视图时会出现错误
删除"startup": true并且错误不会发生
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawChart,
packages:['corechart', 'controls']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'col3');
for (var i= 0; i < 10; i++) {
data.addRow([
new Date(2017, 0, 6, (i + 1)),
i * 1,
i * 2,
i * 3,
]);
}
chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1div',
'options': {
title: 'Chart1',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out',
"startup": true
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0, 1]}
});
chart2 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart2div',
dataTable: data,
'options': {
title: 'chart2',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out'
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0, 2]}
});
chart2.draw();
timeRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'curveType': 'function',
'chartArea': {'width': '90%'},
//'hAxis': {'baselineColor': 'none'}
'hAxis': {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
},
'chartView': {
'columns': [0, 1, 2, 3]
},
'minRangeSize': 43200000
}
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(timeRangeSlider, [chart]);
dashboard.draw(data);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="chart1div"></div>
<div id="chart2div"></div>
<div id="filter_div"></div>
</div>
答案 1 :(得分：0)
使用'setColumns'时出现错误：例如using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using Microsoft.Win32;
namespace Fisk_Environment
{
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
RegistryKey key = Registry.CurrentUser.OpenSubKey(@"SOFTWARE\VB and VBA Program Settings\Fisk\Installation\Environment");
if (key != null)
{
MessageBox.Show((string)key.GetValue("Settings"));
key.Close();
}
Application.Run(new Form1());
}
}
}
作为一种解决方法，当您计算列时，错误不会出现：
view.setColumns([0,1,2])