Как обновить параметры существующей диаграммы google в оболочке

Question

Как изменить/обновить существующие параметры диаграммы Google. Скажем, я хочу с одним нажатием кнопки применить эти параметры к существующей схеме:

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

и да, я знаю, что вы можете сделать Al это с chartEditor, но это решение не будет работать для меня этот случай

Answer 1

Если у наш график в DashboardChartWrapper, вы можете быть вдохновлены 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>

Answer 2

Вызвать draw() функция с новыми параметрами

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

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