Google 图表以编程方式添加选项

Question

淹没后是否可以在图表中添加选项？

我知道我可以使用 delete option.optionname 删除一个选项，但我怎样才能添加一个新选项？

编辑：@WhiteHat 回答 options.backgroundColor = 'cyan'; 效果很好，但我如何添加动画，例如：

  animation: {
            duration: 4000,
            startup: true,
            easing: 'inAndOut',
        }

现有选项。

Answer 1

这将是我的建议：

Every time you have a new data. Call  location.reload();

Which will reload the page and then from there load function will be automatically called. Load function are as follows.

$(function(data,options) {

drawCustomChart(data,options);

});

Define a custom function which will take data and redraw the chart. Cutom funciton is as follows:

function drawCustomChart(data,options){
chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true


});


}


After drawing the chart I thing this is the only thing which will fulfill your requirement. Because somewhere down the line we are consuming google Api to draw the chart. And it does not give liberty to change the option after the chart has been drawn.

Thanks.

Answer 2

任何时候您想要更改选项，都必须重新绘制图表

所以很简单...

  options.backgroundColor = 'cyan';
  chart.draw(data, options);

你也可以使用Chart Wrapper Class，它有一个方法setOption

但还是要重绘

请参阅以下工作代码段，其中绘制了...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
      options.backgroundColor = 'cyan';
      chart.draw(data, options);
    });
    chart.draw(data, options);

    var wrapper = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'wrapper_div',
      dataTable: data,
      options: options
    });
    google.visualization.events.addOneTimeListener(wrapper, 'ready', function () {
      wrapper.setOption('backgroundColor', 'magenta');
      wrapper.draw();
    });
    wrapper.draw();
  },
  packages: ['corechart']
});

div {
  padding: 8px;
}

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

Google 图表以编程方式添加选项

Google charts add option programmatically

javascript

options

google-visualization