將部分添加到註記圖表？

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

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

這是谷歌的財務圖表是什麼樣子，但我可以」噸似乎包括體積部以紅色標記：

Answer 1

的annotation chart不包括中間圖表/體積部

這可以通過繪製另一個手動添加，單獨的圖表

然而，第二圖表不能被放置在註釋圖表之間，它是一個選項範圍過濾器

因爲如此，您需要關閉批註的範圍過濾器
並得出自己的ChartRangeFilter

通常，銅自定過濾器綁定到使用dashboard

但是圖表，同時爲這個答案的例子，
我注意到註釋圖表不會重新繪製正確

過濾器已被應用後，再去除，
註釋圖表不會恢復到原來的狀態
改正，需要創建註釋圖表每次繪製時間

看到下面的工作片段，

柱形圖用於體積部

範圍濾波器綁定使用手動'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>