Question

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

我知道我可以删除delete option.optionname选项，但如何添加新选项呢？

编辑：@WhiteHat回答options.backgroundColor = 'cyan';效果很好，但我怎样才能添加动画：

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

到现有选项。

Answer 1

只要您想要更改选项，就必须重新绘制图表

所以它很容易......

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

您还可以使用Chart Wrapper Class，其中包含方法setOption

但是，之后必须重新绘制

请参阅以下工作代码段，它会同时绘制...

＆＃13;

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

＆＃13;

div {
  padding: 8px;
}

＆＃13;

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

＆＃13;

Answer 2

这将是我的建议：

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.

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

2 个答案: