Question

如何更改/更新现有的Google图表选项。假设我想通过单击按钮将这些选项应用于现有图表：

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

是的，我知道你可以用chartEditor做这个，但在这种情况下，这个解决方案对我不起作用

Answer 1

使用新选项

调用draw()函数

＆＃13;

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawBasic);

var changeOptions; // global variable for callback function

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'Quantity');
  data.addRows([
      ['one',5],
      ['two',15],
      ['three',8]
  ]);

  var options = {
      title: 'Original Title',
  };

  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div'));

  chart.draw(data, options);

  // function to change options on button click
  changeOptions = function() {
      // define new options
      options.width = 200;
      options.height = 200;
      options.title = 'Toppings I Like On My Pizza';
      options.colors = ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'];
       // call draw() with new options 
      chart.draw(data, options);
  }
}

＆＃13;

<script src="//www.gstatic.com/charts/loader.js"></script>
<button onclick="changeOptions();">change options</button>
<div id="chart_div"></div>

＆＃13;

Answer 2

如果您的图表是ChartWrapper中的Dashboard，您可能会受到启发 https://developers.google.com/chart/interactive/docs/gallery/controls#8-programmatic-changes-after-draw

      google.charts.load('current', {
        'packages': ['corechart', 'controls']
      });
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        var programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {
              'labelStacking': 'vertical'
            }
          }
        });

        // We omit "var" so that programmaticChart is visible to changeOptions().
        programmaticChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {
              'left': 15,
              'top': 15,
              'right': 0,
              'bottom': 0
            },
            'pieSliceText': 'value'
          }
        });

        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael', 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button onclick="changeOptions();">
  Change Options
</button>
<script type="text/javascript">
  function changeOptions() {
    programmaticChart.setOptions({
      width: 400,
      height: 240,
      title: 'Toppings I Like On My Pizza',
      colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
    });
    programmaticChart.draw();
  }
</script>
<div id="programmatic_dashboard_div">
  <div id="programmatic_control_div"></div>
  <div id="programmatic_chart_div"></div>
</div>

如何在包装器中更新现有Google图表的选项

2 个答案: