使用Google Visualization，DataView内容为什么会在ChartRangeFilter中显示，但不在其关联的LineChart中？ [英] Using Google Visualization, why is DataView content showing in ChartRangeFilter but not in its associated LineChart?
本文介绍了使用Google Visualization，DataView内容为什么会在ChartRangeFilter中显示，但不在其关联的LineChart中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
google.load（'visualization'，'1'，{packages： ['controls'，'charteditor']}）;
google.setOnLoadCallback（drawChart）;
函数drawChart（）{
//创建CSV字符串
csvString ='TIME，TEMP0，HUM0 \\\
13：00：04,24.7,50 \\\
13：01 ：05,26.7,60\\\
13：02：04,22.7,52\\\
13：03：05,14.7,40\\\
13：04：04,34.7,80\\\
13：05：05,24.7,50 ;
//将字符串解析为数组
var arrayData = $ .csv.toArrays（csvString，{onParseValue：$ .csv.hooks.castToScalar}）;
//将数组转换为数据表
var data = new google.visualization.arrayToDataTable（arrayData）;
//从DataTable创建DataView
var view = new google.visualization.DataView（data）;
//将第一列中的字符串时间转换为timeofday（感谢WhiteHat！）
var columns = [];
for（var i = 0; i< data.getNumberOfColumns（）; i ++）{
columns.push（i）;
$ b列[0] = {
calc：function（dt，row）{
var thisDate = new Date（'1/1/2016'+ dt.getValue（row，0））;
return [thisDate.getHours（），thisDate.getMinutes（），thisDate.getSeconds（），thisDate.getMilliseconds（）];
}，
label：arrayData [0] [0]，
类型：'timeofday'
};
//确定哪些列应该可见
view.setColumns（columns）;
//创建仪表板
var dash = new google.visualization.Dashboard（document.getElementById（'dashboard'））;
//范围过滤器控制包装器
var control = new google.visualization.ControlWrapper（{
controlType：'ChartRangeFilter'，
containerId：'control_div'，
选项：{
filterColumnIndex：0，
ui：{
chartOptions：{
height：50，
width：1000，
}，
chartView：{
columns：[0，1,2]
}
}
}
}）;
折线图包装
var chart = new google.visualization.ChartWrapper（{
chartType：'LineChart'，
containerId：'chart_div'，
dataTable：view，
options：{
title：'Home Automation - Environment Sensor Log'，
width：1000，
height：400
}
}）;
//在仪表板中绑定控件和图表
dash.bind（[control]，[chart]）;
//使用Dataview作为源绘制仪表板
dash.draw（view）;
}
这是当前最终结果：
谢谢！
解决方案
尝试了很多事情来让图表与'timeofday'一起工作，但没有运气
但是，使用'date'列，格式为'HH：mm：ss'似乎工作正常
请参阅以下工作片段。
更改包括：
<1>使用 loader.js cs jsapi
2）更改 calc
3）将 hAxis.ticks 添加到图表和控制
4）使用 getColumnRange 来设置 vAxis.viewWindow on 图表
data-console =truedata-babel =false>
< script src =https://www.gstatic.com/charts/loader.js>< / script>< script src =https://ajax.googleapis.com/ajax /libs/jquery/1.11.3/jquery.min.js\"></script><script src =https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery。 csv-0.71.min.js>< / script>< div id =dashboard> < div id =chart_div>< / div> < div id =control_div>< / div>< / div>
The code below should populate a DataView from a CSV file. The DataView is then fed to a DashBoard which inludes a LineChart and a ChartRangeFilter bound together. My problem is that while the ChartRangeFilter shows a proper chart preview and allows me to select the range the LineChart shows only an empty data set but with the right data type and axis labels. My assumption is that the DataView content is OK since the ChartRangeFilter is capable of showing it. Why then can't the LineChart do the same?
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create CSV string
csvString = 'TIME,TEMP0,HUM0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50';
// Parse string into an Array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// Convert Array into a DataTable
var data = new google.visualization.arrayToDataTable(arrayData);
// Create DataView from DataTable
var view = new google.visualization.DataView(data);
// Convert string times in first column to timeofday (thanks to WhiteHat!)
var columns = [];
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
}
columns[0] = {
calc: function(dt, row) {
var thisDate = new Date('1/1/2016 ' + dt.getValue(row, 0));
return [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds(), thisDate.getMilliseconds()];
},
label: arrayData[0][0],
type: 'timeofday'
};
// Determine which columns should be visible
view.setColumns(columns);
// Create Dashboard
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
// Range filter control wrapper
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 1000,
},
chartView: {
columns: [0, 1,2]
}
}
}
});
// Line chart wrapper
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: view,
options:{
title: 'Home Automation - Environment Sensor Log',
width: 1000,
height: 400
}
});
// Bind control and chart in Dashboard
dash.bind([control], [chart]);
// Draw dashboard using Dataview as source
dash.draw(view);
}
This is the current end result:
Thanks!
解决方案
tried a number of things to get the chart to work with 'timeofday', but no luck
however, using a 'date' column, formatted as 'HH:mm:ss' seems to work fine
see following working snippet.
changes include:
1) using loader.js vs. jsapi
2) changed calc function to return date formatted as time
3) added hAxis.ticks to both chart and control
4) used getColumnRange to set the vAxis.viewWindow on the chart
google.charts.load('current', {
callback: function () {
// Create CSV string
csvString = 'TIME,TEMP0,HUM0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50';
// Parse string into an Array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// Convert Array into a DataTable
var data = new google.visualization.arrayToDataTable(arrayData);
// Create DataView from DataTable
var view = new google.visualization.DataView(data);
// Convert string times in first column to timeofday (thanks to WhiteHat!)
var columns = [];
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
}
var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'});
columns[0] = {
calc: function(dt, row) {
var dateValue = new Date('1/1/2016 ' + dt.getValue(row, 0));
return {
v: dateValue,
f: formatter.formatValue(dateValue)
};
},
label: arrayData[0][0],
type: 'date'
};
// Determine which columns should be visible
view.setColumns(columns);
var tickMarks = [];
for (var i = 0; i < view.getNumberOfRows(); i++) {
tickMarks.push(view.getValue(i, 0));
}
// Create Dashboard
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
// Get column range min & max
var yRange1 = view.getColumnRange(1);
var yRange2 = view.getColumnRange(2);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 1000,
hAxis: {
ticks: tickMarks,
format: 'HH:mm:ss'
}
}
}
}
});
// Line chart wrapper
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options:{
pointSize: 8,
title: 'Home Automation - Environment Sensor Log',
width: 1000,
height: 400,
hAxis: {
ticks: tickMarks,
format: 'HH:mm:ss'
},
vAxis: {
viewWindow: {
min: Math.min(yRange1.min, yRange2.min),
max: Math.max(yRange1.max, yRange2.max)
}
}
}
});
// Bind control and chart in Dashboard
dash.bind(control, chart);
// Draw dashboard using Dataview as source
dash.draw(view);
},
packages: ['controls', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
</div>
这篇关于使用Google Visualization，DataView内容为什么会在ChartRangeFilter中显示，但不在其关联的LineChart中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
