Question

下面的代码应该从CSV文件填充DataView。然后将DataView输入DashBoard，其中包含绑定在一起的LineChart和ChartRangeFilter。我的问题是，ChartRangeFilter显示正确的图表预览，并允许我选择范围，LineChart只显示一个空数据集，但具有正确的数据类型和轴标签。我的假设是DataView内容没问题，因为ChartRangeFilter能够显示它。为什么LineChart不能这样做？

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);
}

这是目前的最终结果：

谢谢！

Answer 1

尝试了许多方法让图表与'timeofday'一起使用，但没有运气

但是，使用格式为'date'的{{1}}列似乎可以正常工作

请参阅以下工作代码段。

更改包括：

1）使用'HH:mm:ss'与loader.js的对比 2）更改jsapi函数以返回格式化为时间
的日期 3）将calc添加到hAxis.ticks和chart
4）使用control在getColumnRange

上设置vAxis.viewWindow

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']
});

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

1 个答案: