谷歌图表AreaChart和材料设计

问题描述：

有什么办法可以使AreaChart使用/设计材料设计“主题”？谷歌图表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>

答

推荐使用配置选项 - >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>

谷歌图表AreaChart和材料设计

相关推荐