添加部分到注释图表？

Question

我正在使用Google Charts的注释图表来显示数据.一切正常,但它没有显示音量部分,正如这个谷歌财务图表所示,我认为,使用相同的图表.

这是我到目前为止所做的,但我不知道如何包含该部分:

      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>

这是谷歌财务图表的样子,但我似乎无法包括标记为红色的音量部分:

Answer 1

注释图表 不包括中间图表/体积部分的选项

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

但是，第二个图表不能放置在注释图表与其范围过滤器之间

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

通常，自定义过滤器使用仪表板绑定到图表

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

应用过滤器然后移除后，
注释图表不会返回到原始状态
以进行更正，需要在每次绘制时创建注释图表

请参阅以下工作片段，

柱形图用于体积部分

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

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>