javascript - 向注释图表添加部分？

Question

我正在使用 Google Charts' Annotation Chart显示数据。一切正常，但未显示音量部分，如本 google finance chart 所示我相信，它使用相同的图表。

这是我到目前为止的内容，但我不知道如何包括该部分:

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

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

这是 google finance 图表的样子，但我似乎无法包括标记为红色的 volume 部分:

Answer 1

annotation chart 不包括中间图表的选项/成交量部分

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

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

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

通常，自定义过滤器使用 dashboard 绑定(bind)到图表

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

应用过滤器然后移除过滤器后，
注释图表未返回原始状态
更正一下，每次绘制都需要创建注释图

请参阅以下工作片段，

柱形图用于成交量部分

范围过滤器使用'statechange'事件手动绑定(bind)

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

<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>