Javascript 在仪表板中添加ControlWrapper筛选器设置时出错。怎么了？_Javascript_Charts_Google Visualization

Javascript 在仪表板中添加ControlWrapper筛选器设置时出错。怎么了？

javascript charts google-visualization

Javascript 在仪表板中添加ControlWrapper筛选器设置时出错。怎么了？,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我在创建google图表时发现以下错误添加筛选器时出错。我将日期格式更改为“hh:mm:ss”，但错误仍然发生。如何打印图形？我应该修理什么零件 1.谷歌图表代码： <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascri

我在创建google图表时发现以下错误

添加筛选器时出错。我将日期格式更改为“hh:mm:ss”，但错误仍然发生。如何打印图形？我应该修理什么零件

1.谷歌图表代码：

<html>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart', 'controls']
        });
        google.charts.setOnLoadCallback(drawDashboard);

        function drawDashboard() {
            var data = google.visualization.arrayToDataTable([
                ['Time', 'user', 'nice', 'system', 'iowait', 'idle'],
                ['00:01:01', 0.24, 0.0, 0.16, 0.27, 99.33],
                ['00:02:01', 0.13, 0.0, 0.04, 0.13, 99.7],
                ['00:03:01', 1.05, 0.0, 0.38, 0.26, 98.3],
                ['00:04:01', 0.44, 0.0, 0.1, 0.15, 99.32],
                ['00:05:01', 0.25, 0.0, 0.08, 0.22, 99.45],
                ['00:06:01', 0.42, 0.0, 0.26, 0.17, 99.15],
                ['00:07:01', 0.99, 0.0, 1.18, 0.24, 97.59],
                ['00:08:01', 0.82, 0.0, 0.3, 0.18, 98.7],
                ['00:09:01', 0.17, 0.0, 0.06, 0.19, 99.58],
                ['00:10:01', 0.18, 0.0, 0.05, 0.16, 99.61],
                ['00:11:01', 0.16, 0.0, 0.05, 0.18, 99.61],
                ['00:12:01', 0.13, 0.0, 0.03, 0.08, 99.76],
                ['00:13:01', 0.19, 0.0, 0.07, 0.22, 99.51],
                ['00:14:01', 0.15, 0.0, 0.03, 0.13, 99.69],
                ['00:15:01', 0.2, 0.0, 0.08, 0.17, 99.55],
                ['00:16:01', 0.48, 0.0, 0.28, 0.16, 99.08],
                ['00:17:01', 0.17, 0.0, 0.07, 0.21, 99.55],
                ['00:18:01', 0.45, 0.0, 0.23, 0.18, 99.13],
                ['00:19:01', 0.17, 0.0, 0.05, 0.23, 99.55],
                ['00:20:01', 0.93, 0.0, 0.37, 0.25, 98.44]
            ]);

            var dashboard = new google.visualization.Dashboard(
                document.getElementById('dashboard_div'));

            var control = new google.visualization.ControlWrapper({
                'controlType': 'ChartRangeFilter',
                'containerId': 'control',
                'options': {
                    'filterColumnIndex': 0,
                    'ui': {
                        'chartType': 'AreaChart',
                        'minRangeSize': 86400000
                    }
                }
            });

            var chart = new google.visualization.ChartWrapper({
                'chartType': 'AreaChart',
                'containerId': 'chart'
            });

            var formatter = new google.visualization.DateFormat({
                pattern: "hh:mm:ss"
            });
            formatter.format(data, 0);

            dashboard.bind(control, chart);
            dashboard.draw(data);
        }
    </script>
</head>

<body>
    <div id="dashboard">
        <div id="chart" style='width: 915px; height: 300px;'></div>
        <div id="control" style='width: 915px; height: 50px;'></div>
</body>

</html>


google.charts.load（'current'{
“包”：[“核心图表”，“控件”]
});
google.charts.setOnLoadCallback（drawDashboard）；
函数drawDashboard（）{
var data=google.visualization.arrayToDataTable([
['Time'，'user'，'nice'，'system'，'iowait'，'idle']，
['00:01:01', 0.24, 0.0, 0.16, 0.27, 99.33],
['00:02:01', 0.13, 0.0, 0.04, 0.13, 99.7],
['00:03:01', 1.05, 0.0, 0.38, 0.26, 98.3],
['00:04:01', 0.44, 0.0, 0.1, 0.15, 99.32],
['00:05:01', 0.25, 0.0, 0.08, 0.22, 99.45],
['00:06:01', 0.42, 0.0, 0.26, 0.17, 99.15],
['00:07:01', 0.99, 0.0, 1.18, 0.24, 97.59],
['00:08:01', 0.82, 0.0, 0.3, 0.18, 98.7],
['00:09:01', 0.17, 0.0, 0.06, 0.19, 99.58],
['00:10:01', 0.18, 0.0, 0.05, 0.16, 99.61],
['00:11:01', 0.16, 0.0, 0.05, 0.18, 99.61],
['00:12:01', 0.13, 0.0, 0.03, 0.08, 99.76],
['00:13:01', 0.19, 0.0, 0.07, 0.22, 99.51],
['00:14:01', 0.15, 0.0, 0.03, 0.13, 99.69],
['00:15:01', 0.2, 0.0, 0.08, 0.17, 99.55],
['00:16:01', 0.48, 0.0, 0.28, 0.16, 99.08],
['00:17:01', 0.17, 0.0, 0.07, 0.21, 99.55],
['00:18:01', 0.45, 0.0, 0.23, 0.18, 99.13],
['00:19:01', 0.17, 0.0, 0.05, 0.23, 99.55],
['00:20:01', 0.93, 0.0, 0.37, 0.25, 98.44]
]);
var dashboard=new google.visualization.dashboard(
document.getElementById（'dashboard_div'）；
var control=new google.visualization.ControlWrapper({
“controlType”：“ChartRangeFilter”，
“集装箱ID”：“控制”，
“选项”：{
“filterColumnIndex”：0，
“用户界面”：{
“图表类型”：“区域图表”，
“minRangeSize”：86400000
}
}
});
var chart=new google.visualization.ChartWrapper({
“图表类型”：“区域图表”，
“集装箱运输”：“图表”
});
var formatter=new google.visualization.DateFormat({
图案：“hh:mm:ss”
});
格式化程序。格式化（数据，0）；
仪表板绑定（控件、图表）；
仪表盘.绘图（数据）；
}

2.错误消息：

错误1

数组第一列中的值是字符串（

'00:01:01'

）
正如错误所提到的，第一列必须是

您可以使用将列转换为日期
然后使用视图绘制仪表板

错误2

使用错误的

id创建仪表板对象
应该是-->

'dashboard'

--而不是--

'dashboard\u div'

请参阅以下工作片段

google.charts.load（'current'{
回调：drawDashboard，
包：['corechart'，'controls']
});
函数drawDashboard（）{
var formatDate=new google.visualization.DateFormat({
模式：“yyyy-MM-dd”
});
var formatTime=new google.visualization.DateFormat({
图案：“hh:mm:ss”
});
var data=google.visualization.arrayToDataTable（['Time'，'user'，'nice'，'system'，'iowait'，'idle'，['00:01:01'，0.24,0.0,0.16,0.27,99.33]，'00:02:01'，0.13,0.0,0.04,0.13,99.7]，'00:03:01'，1.05,0.0.0,0.38,0.26,98.3]，'00:04:01'，0.44,0.0.0.0.0,0.1,0.15,99.32]，'00:01,0.05,0.05,0.05,0.45]，['00:06:01', 0.42, 0.0, 0.26, 0.17, 99.15], ['00:07:01', 0.99, 0.0, 1.18, 0.24, 97.59], ['00:08:01', 0.82, 0.0, 0.3, 0.18, 98.7], ['00:09:01', 0.17, 0.0, 0.06, 0.19, 99.58], ['00:10:01', 0.18, 0.0, 0.05, 0.16, 99.61], ['00:11:01', 0.16, 0.0, 0.05, 0.18, 99.61], ['00:12:01', 0.13, 0.0, 0.03, 0.08, 99.76], ['00:13:01', 0.19, 0.0, 0.07, 0.22, 99.51], ['00:14:01', 0.15, 0.0, 0.03, 0.13, 99.69], ['00:15:01', 0.2, 0.0, 0.08, 0.17, 99.55], ['00:16:01', 0.48, 0.0, 0.28, 0.16, 99.08], ['00:17:01', 0.17, 0.0, 0.07, 0.21, 99.55], ['00:18:01', 0.45, 0.0, 0.23, 0.18, 99.13], ['00:19:01', 0.17, 0.0, 0.05, 0.23, 99.55], ['00:20:01', 0.93, 0.0, 0.37, 0.25, 98.44]]);
var today=formatDate.formatValue（new Date（））；
var viewColumns=[{
计算：函数（dt，行）{
var rowDate=新日期（今天+'T'+dt.getValue（第0行）+'Z'）；
返回{
v:rowDate，
f:formatTime.formatValue（rowDate）
}
},
标签：data.getColumnLabel（0），
键入：“日期”
}];
$.each（新数组（data.getNumberOfColumns（））、函数（colIndex）{
如果（colIndex==0）{
返回；
}
viewColumns.push（colIndex）；
});
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（viewColumns）；
var dashboard=new google.visualization.dashboard(
document.getElementById（'仪表板'）
);
var control=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
集装箱：“控制”，
选项：{
filterColumnIndex:0，
用户界面：{
图表类型：“区域图表”，
最小范围大小：86400000
}
}
});
var chart=new google.visualization.ChartWrapper({
图表类型：“区域图表”，
集装箱船：“海图”
});
仪表板绑定（控件、图表）；
仪表板。绘制（视图）；
}

我复制并运行了代码，但它不工作。它是如何工作的？