使用Google Visualization，DataView内容为什么会在ChartRangeFilter中显示，但不在其关联的LineChart中？

问题描述

下面的代码应该从CSV文件填充DataView。然后将DataView提供给包含在一起的LineChart和ChartRangeFilter的DashBoard。我的问题是，虽然ChartRangeFilter显示一个适当的图表预览，并允许我选择范围LineChart只显示一个空的数据集，但具有正确的数据类型和轴标签。我的假设是DataView内容是OK的，因为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'似乎工作正常

请参阅以下工作片段。

更改包括：

使用 loader.js

2）更改 calc
3）将 hAxis.ticks 添加到图表和控制

4）使用 getColumnRange 来设置 vAxis.viewWindow on 图表

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}）; //转换Arr ay到一个DataTable 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）; } var formatter = new google.visualization.DateFormat（{pattern：'HH：mm：ss'}）; column [0] = {calc：function（dt，row）{var dateValue = new Date（'1/1/2016'+ dt.getValue（row，0））;返回{v：dateValue，f：formatter.formatValue（dateValue）}; }，label：arrayData [0] [0]，键入：'date'}; //确定哪些列应该可见view.setColumns（columns）; var tickMarks = []; for（var i = 0; i< view.getNumberOfRows（）; i ++）{tickMarks.push（view.getValue（i，0））; } //创建仪表板var dash = new google.visualization.Dashboard（document.getElementById（'dashboard'））; //获取列范围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 ，格式：'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）}}}}）; //在Dashboard中绑定控件和图表dash.bind（control，chart）; //使用Dataview作为源绘制仪表板dash.draw（view）; }，packages：['controls'，'corechart']}）; <$ code>

 < 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中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！