Google 차트 AreaChart 및 재료 디자인

Question

AreaChart을 소재 디자인 "테마"로 사용/스타일 적용 할 수있는 방법이 있습니까? 여기

차트의 조각입니다 :

 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>