从Google注释图表中删除缩放按钮

Question

我正在尝试从Google注释图表上的缩放菜单中删除1h，1d，5d：

我找到了一篇帖子，表明完成此操作的方法是将以下内容添加到chart.draw函数中，但它没有做任何事情。请指教。

    chart.draw(data, options);
    $("#chart_div_AnnotationChart_zoomControlContainer_hour").remove(); 
    $("#chart_div_AnnotationChart_zoomControlContainer_day").remove();}; 

Answer 1

您可以使用图表选项 - ＆gt; displayZoomButtons

var options = {
  displayZoomButtons: false
};

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['annotationchart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'WTI');
  data.addColumn('number', 'Nat Gas FOB US');
  data.addRows([
    [new Date(2015, 0, 1), 5, null],
    [new Date(2015, 0, 4), 1, null],
    [new Date(2015, 0, 7), 3, null],
    [new Date(2015, 0, 10), 5, null],
    [new Date(2015, 0, 13), 3, null],
    [new Date(2015, 0, 16), 7, null],
    [new Date(2015, 0, 19), 3, null],
    [new Date(2015, 0, 22), 4, null],
    [new Date(2015, 0, 25), 9, null],
    [new Date(2015, 0, 28), 8, null],
    [new Date(2015, 0, 31), 6, null]
  ]);

  var options = {
    displayZoomButtons: false
  };

  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

Answer 2

您还可以使用事件侦听器隐藏特定的缩放按钮（请注意如何在chart.draw()之前添加侦听器）：

google.charts.load('current', {
  packages: ['annotationchart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'WTI');
  data.addColumn('number', 'Nat Gas FOB US');
  data.addRows([
    [new Date(2015, 0, 1), 5, null],
    [new Date(2015, 0, 4), 1, null],
    [new Date(2015, 0, 7), 3, null],
    [new Date(2015, 0, 10), 5, null],
    [new Date(2015, 0, 13), 3, null],
    [new Date(2015, 0, 16), 7, null],
    [new Date(2015, 0, 19), 3, null],
    [new Date(2015, 0, 22), 4, null],
    [new Date(2015, 0, 25), 9, null],
    [new Date(2015, 0, 28), 8, null],
    [new Date(2015, 0, 31), 6, null]
  ]);

  var options = {
    displayZoomButtons: true
  };

  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_container'));
  google.visualization.events.addListener(chart, 'ready', hideUnwantedZoomButtons);
  chart.draw(data, options);
});

function hideUnwantedZoomButtons() {
    const buttons = document
        .getElementById('chart_container_AnnotationChart_zoomControlContainer')
        .getElementsByTagName('button');
    const threeMonthButtonId = 'chart_container_AnnotationChart_zoomControlContainer_3-months';
    let threeMonthButtonKey;
    for (let i = 0; i < buttons.length; i++) {
        if (buttons[i].id === threeMonthButtonId) {
            threeMonthButtonKey = i;
        }
    }
    if (threeMonthButtonKey === 'undefined') {
        return;
    }
    for (let i = threeMonthButtonKey; i < buttons.length - 1; i++) {
        buttons[i].hidden = true;
    }
}

请参阅JSFiddle

上的工作示例