Question

我正在使用折线图，它允许通过单击图例来选择性地查看图表上的Y系列数据。像Google财经图表这样的东西允许您在图表上添加不同的股票。

我想在此示例中添加日期范围过滤器，例如注释图表底部： https://developers.google.com/chart/interactive/docs/gallery/annotationchart

但它只显示一个空白屏幕。

这是我的折线图代码：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>
<script type='text/javascript'>
  google.load("visualization", "1", {packages:["corechart"]});
  google.load('visualization', '1', { packages : ['controls'] } );

  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Date', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2014',  1230,      40]
    ]);

var options = {
    width: 900,
    height: 600,
    title: 'Company Performance',
    displayAnnotations: true,
    series: series
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); //line chart
chart.draw(data, options);

var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
        series[i - 1] = {};
    }
}

google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
        // if row is null, we clicked on the legend
        if (sel[0].row == null) {
            var col = sel[0].column;
            if (columns[col] == col) {
                // hide the data series
                columns[col] = {
                    label: data.getColumnLabel(col),
                    type: data.getColumnType(col),
                    calc: function () {
                        return null;
                    }
                };

                // grey out the legend entry
                series[col - 1].color = '#CCCCCC';
            }
            else {
                // show the data series
                columns[col] = col;
                series[col - 1].color = null;
            }
            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            chart.draw(view, options);
        }
    }
});
  }
</script>
</head>

<body>
<div id='chart_div' style='width: 900px; height: 600px;'></div>
</body>
</html>

Answer 1

你应该使用带有Chartwrapper的仪表板作为LineChart，使用daterangefilter作为ControlWrapper而不是像你一样初始化图表（你甚至不能调用daterangefilter）。

Google图表，带有日期范围过滤器的折线图

1 个答案: