Question

我设法在我的网页上实现了一个连续的轴谷歌图表，并按照我想要的方式对其进行了格式化。现在我的要求发生了变化，我试图从CSV加载此图表，而不是硬编码和随机生成的数据。

我已经迷茫了自己，并且对如何将我的工作图表转换成CSV格式感到困惑。我将在这里发布一些内容，

我使用CSV的其他图表之一，这就是我尝试重新创建
我的工作连续轴图表运行硬编码数据
我现在已经尝试实施此更改，现在是图表的当前状态。

这是＃1：

            function drawPieVisualization() {
               $.get("Thornton.M2.csv", function(csvString) {
                  // transform the CSV string into a 2-dimensional array
                  var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});


                  // this new DataTable object holds all the data
                  var data = new google.visualization.arrayToDataTable(arrayData);
                  // CAPACITY - En-route ATFM delay - YY - CHART
                  var pieMain = new google.visualization.ChartWrapper({
                     chartType: 'BarChart',
                     containerId: 'pieMain',
                     dataTable: data,
                     options:{
                         title: 'Bar Chart Test',
                        'vAxis': { title: "Bar Chart Test" },
                        'width': 1100, 
                        'height': 540,
                        'backgroundColor': 'Ivory',
                        'color':'Black',
                        'hAxis': {
                    title: "Date",
                    gridlines: { count: 3, color: '#CCC' },
                    format: 'dd-MMM-yyyy'
                },
                        title: 'Bar Chart Test',
                        titleTextStyle : {color: 'Black', fontSize: 16},
                     }
                  });
                  pieMain.draw();
               });
            }
            google.setOnLoadCallback(drawPieVisualization)

            changeRange = function() {
          pieMain.sort({column: 0, desc: false});
          pieMain.draw();
        };

            changeRangeBack = function() {
          pieMain.sort({column: 0, desc: true});
          pieMain.draw();
        };

这是＃2：

    function drawVisualization() {
 var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Value');

    // add 100 rows of pseudo-random-walk data
    for (var i = 0, val = 50; i < 100; i++) {
        val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        if (val < 0) {
            val += 5;
        }
        if (val > 100) {
            val -= 5;
        }
        data.addRow([new Date(2014, 0, i + 1), val]);
    }

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ComboChart',
        containerId: 'slider_chart_div',
        options: {
            'title': 'Average Ratings',
                            'vAxis': { title: "Average Rating" },
                            'backgroundColor': 'Ivory',
                            'color':'Black',
            width: 1100,
            height: 400,
            // omit width, since we set this in CSS
            chartArea: {
                width: '75%' // this should be the same as the ChartRangeFilter
            }
        }
    });

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    'backgroundColor': 'Ivory',
                            'color':'Black',
                    width: 1100,
                    height: 50,
                    // omit width, since we set this in CSS
                    chartArea: {
                        width: '75%' // this should be the same as the ChartRangeFilter
                    }
                }
            }
        }
    });

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);

    function zoomLastDay () {
        var range = data.getColumnRange(0);
        control.setState({
            range: {
                start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
                end: range.max
            }
        });
        control.draw();
    }
    function zoomLastWeek () {
        var range = data.getColumnRange(0);
        control.setState({
            range: {
                start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
                end: range.max
            }
        });
        control.draw();
    }
    function zoomLastMonth () {
        // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
        // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
        // you can tweak this to make it function differently if you want
        var range = data.getColumnRange(0);
        control.setState({
            range: {
                start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
                end: range.max
            }
        });
        control.draw();
    }

    var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
        google.visualization.events.removeListener(runOnce);

        if (document.addEventListener) {
            document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
            document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
            document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
        }
        else if (document.attachEvent) {
            document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
            document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
            document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
        }
        else {
            document.querySelector('#lastDay').onclick = zoomLastDay;
            document.querySelector('#lastWeek').onclick = zoomLastWeek;
            document.querySelector('#lastMonth').onclick = zoomLastMonth;
        }
    });

    }

这是＃3：

function drawVisualization() {
 $.get("Source7Days.csv", function(csvString) {
                  // transform the CSV string into a 2-dimensional array
                  var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});


                  // this new DataTable object holds all the data
                  var data = new google.visualization.arrayToDataTable(arrayData);


var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'slider_chart_div',
    dataTable: data,
    options: {
        'title': 'Average Ratings',
                        'vAxis': { title: "Average Rating" },
                        'backgroundColor': 'Ivory',
                        'color':'Black',
        width: 1100,
        height: 400,
        // omit width, since we set this in CSS
        chartArea: {
            width: '75%' // this should be the same as the ChartRangeFilter
        }
    }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',

    options: {
        filterColumnIndex: 0,
        ui: {
            chartOptions: {
                'backgroundColor': 'Ivory',
                        'color':'Black',
                width: 1100,
                height: 50,
                // omit width, since we set this in CSS
                chartArea: {
                    width: '75%' // this should be the same as the ChartRangeFilter
                }
            }
        }
    }
});

var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);

function zoomLastDay () {
    var range = data.getColumnRange(0);
    control.setState({
        range: {
            start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
            end: range.max
        }
    });
    control.draw();
}
function zoomLastWeek () {
    var range = data.getColumnRange(0);
    control.setState({
        range: {
            start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
            end: range.max
        }
    });
    control.draw();
}
function zoomLastMonth () {
    // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
    // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
    // you can tweak this to make it function differently if you want
    var range = data.getColumnRange(0);
    control.setState({
        range: {
            start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
            end: range.max
        }
    });
    control.draw();
}

var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
    google.visualization.events.removeListener(runOnce);

    if (document.addEventListener) {
        document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
        document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
        document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
    }
    else if (document.attachEvent) {
        document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
        document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
        document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
    }
    else {
        document.querySelector('#lastDay').onclick = zoomLastDay;
        document.querySelector('#lastWeek').onclick = zoomLastWeek;
        document.querySelector('#lastMonth').onclick = zoomLastMonth;
    }
});

}


)}

以下是使用

    Time,Value
    2017/05/22 00:05:00,6710.4305066168
    2017/05/22 00:10:00,6667.5043776631
    2017/05/22 00:15:00,6615.6655550003
    2017/05/22 00:20:00,6554.988194257
    2017/05/22 00:25:00,6532.4164219201
    2017/05/22 00:30:00,6520.8965539932

底部＆＃39; runOnce＆＃39;在＃2和＃3中，要在图表上的 1天 - 1周 - 或1个月范围内更改图表上的滑块控件，以便进行说明。

我的图表目前正在向我提供错误：

一个或多个参与者未能绘制（）。（其中两个）

和

过滤器无法对字符串类型的列进行操作。列类型必须是以下之一：数字，日期，日期时间或时间。列角色必须是域，并与连续轴相关联。

Answer 1

第二条错误消息显示arrayToDataTable
将第一列创建为 - ＆gt; type: 'string'
而不是 - ＆gt; type: 'date'

使用DataView将字符串转换为日期

您可以使用method - ＆gt;在数据视图中创建计算列setColumns

在绘制信息中心时，

使用view代替data

请参阅以下摘录...

$.get("Source7Days.csv", function(csvString) {
  var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});

  // this is a static method, "new" keyword should not be used here
  var data = google.visualization.arrayToDataTable(arrayData);

  // create view
  var view = new google.visualization.DataView(data);
  view.setColumns([
    // first column is calculated
    {
      calc: function (dt, row) {
        // convert string to date
        return new Date(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'date'
    },
    // just use index # for second column
    1
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'slider_chart_div',
    options: {
      title: 'Average Ratings',
      vAxis: { title: 'Average Rating' },
      backgroundColor: 'Ivory',
      color: 'Black',
      width: 1100,
      height: 400,
      chartArea: {
        width: '75%'
      }
    }
  });

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          backgroundColor: 'Ivory',
          color: 'Black',
          width: 1100,
          height: 50,
          chartArea: {
            width: '75%'
          }
        }
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
  dashboard.bind([control], [chart]);
  // use data view
  dashboard.draw(view);
  ...

连续轴谷歌图表加载了CSV？

1 个答案: