Google chart AreaChart and material Design

Question

AreaChartを素材デザイン "テーマ"に使用/スタイルさせる方法はありますか？

ここではチャートの抜粋です：configオプションを使用することをお勧め

 google.charts.load('current', {'packages':['corechart']}); 
 
     google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Year', 'Sales', 'Expenses'], 
 
      ['2013', 1000,  400], 
 
      ['2014', 1170,  460], 
 
      ['2015', 660,  1120], 
 
      ['2016', 1030,  540] 
 
     ]); 
 

 
     var options = { 
 
      title: 'Company Performance', 
 
      hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
 
      vAxis: {minValue: 0} 
 
     }; 
 

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
     <div id="chart_div" style="width: 100%; height: 500px;"></div> 
 

Answer 1

- ...>theme: 'material'

作業スニペット以下を参照してください

 google.charts.load('current', {'packages':['corechart']}); 
 
     google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Year', 'Sales', 'Expenses'], 
 
      ['2013', 1000,  400], 
 
      ['2014', 1170,  460], 
 
      ['2015', 660,  1120], 
 
      ['2016', 1030,  540] 
 
     ]); 
 

 
     var options = { 
 
      title: 'Company Performance', 
 
      hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
 
      vAxis: {minValue: 0}, 
 
      theme: 'material' 
 
     }; 
 

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
     <div id="chart_div" style="width: 100%; height: 500px;"></div>