添加部分到注释图表？

Question

我使用Google Charts' Annotation Chart来显示数据。一切正常，但它没有显示音量部分，我认为，google finance chart中使用了相同的图表。

这是我迄今为止所拥有的内容，但我不知道如何包含该部分：

＆＃13;

＆＃13;

      google.charts.load('current', {'packages':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Col1');
        data.addColumn('string', 'Col2');
        data.addColumn('string', 'Col3');
        data.addColumn('number', 'Col4');
        data.addColumn('string', 'Col5');
        data.addColumn('string', 'Col6');
        data.addRows([
          [new Date(2017, 2, 15), 85, 'More', 'Even More',
                                  91, undefined, undefined],
          [new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
                                  99, undefined, undefined],
          [new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
                                  96, 'Att', 'Good'],
          [new Date(2017, 2, 18), 60, 'Sales', 'Low',
                                  80, 'HR', 'Absences'],
          [new Date(2017, 2, 19), 95, 'Sales', 'Goals',
                                  85, 'HR', 'Vacation'],
          [new Date(2017, 2, 20), 40, 'Sales', 'Training',
                                  67, 'HR', 'PTO']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }

＆＃13;

	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<div id='chart_div' style='width: 900px; height: 500px;'></div>

＆＃13;

＆＃13;

＆＃13;

这是Google财经图表的样子，但我似乎无法包含标有红色的卷部分：

Answer 1

annotation chart 不包含中间图表的选项 / 卷部分

这可以通过绘制另一个单独的图表来手动添加

但是，第二张图表不能放在注释图表和它的范围过滤器之间

因此，您需要关闭注释的范围过滤器
并绘制自己的ChartRangeFilter

通常，使用dashboard

将自定义过滤器绑定到图表

然而，在为这个答案构建示例时，
我注意到注释图表没有正确地重新绘制

应用过滤器后，然后取下，
注释图表不会返回原始状态
要纠正，需要在每次绘制时创建注释图表

请参阅以下工作代码段

柱形图用于卷部分

使用'statechange'事件

手动绑定范围过滤器

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawDashboard,
  packages: ['annotationchart', 'controls', 'corechart']
});

function drawDashboard() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Col1');
  data.addColumn('string', 'Col2');
  data.addColumn('string', 'Col3');
  data.addColumn('number', 'Col4');
  data.addColumn('string', 'Col5');
  data.addColumn('string', 'Col6');
  data.addRows([
    [new Date(2017, 2, 15), 85, 'More', 'Even More',
                            91, undefined, undefined],
    [new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
                            99, undefined, undefined],
    [new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
                            96, 'Att', 'Good'],
    [new Date(2017, 2, 18), 60, 'Sales', 'Low',
                            80, 'HR', 'Absences'],
    [new Date(2017, 2, 19), 95, 'Sales', 'Goals',
                            85, 'HR', 'Vacation'],
    [new Date(2017, 2, 20), 40, 'Sales', 'Training',
                            67, 'HR', 'PTO']
  ]);

  var rangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    dataTable: data,
    options: {
      filterColumnLabel: 'Date',
      ui: {
        chartOptions: {
          height: 60,
          width: '100%',
          chartArea: {
            width: '100%'
          },
          chartType: 'AreaChart'
        }
      }
    },
    view: {
      columns: [0, 1, 4]
    }
  });

  google.visualization.events.addListener(rangeFilter, 'ready', drawCharts);
  google.visualization.events.addListener(rangeFilter, 'statechange', drawCharts);

  rangeFilter.draw();

  function drawCharts() {
    var filterState = rangeFilter.getState();
    var filterRows = data.getFilteredRows([{
      column: 0,
      minValue: filterState.range.start,
      maxValue: filterState.range.end
    }]);
    var viewAnn = new google.visualization.DataView(data);
    viewAnn.setRows(filterRows);

    var chartAnn = new google.visualization.AnnotationChart(document.getElementById('chart_ann'));
    var optionsAnn = {
      displayAnnotations: false,
      displayRangeSelector: false
    };
    chartAnn.draw(viewAnn, optionsAnn);

    var viewCol = new google.visualization.DataView(data);
    viewCol.setColumns([0, 1, 4]);
    viewCol.setRows(filterRows);

    var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_col'));
    var optionsCol = {
      hAxis: {
        textStyle: {
          color: 'transparent'
        }
      },
      height: 72,
      legend: 'none',
      theme: 'maximized',
      vAxis: {
        textStyle: {
          color: 'transparent'
        }
      }
    };
    chartCol.draw(viewCol, optionsCol);
  }
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_ann"></div>
<div id="chart_col"></div>
<div id="control_div"></div>

＆＃13;

＆＃13;

＆＃13;