谷歌圖表：如何使用儀表板和新的材料圖表？

Question

看起來dashboard只是使用舊的方式來加載它的庫「經典圖表」使用的方式。我怎樣才能讓儀表板與新的「Material」谷歌圖表一起工作？具體的line graph

材質圖表的jsfiddle：https://jsfiddle.net/yzhsf1gv/3/

儀表板jsiddle：https://jsfiddle.net/job30vwy/

我的母語猜測是

google.charts.load('current', {'packages': ['line', 'controls']}); 

但似乎沒有工作

Answer 1

似乎在這裏工作。 ..？

只需指定材料圖表中ChartWrapper chartType ...

'chartType': 'Line',

與

'chartType': 'LineChart',

使用相同的類名，你會在這裏指定 - >

new google.charts.-->Line(document.getElementById('chart_div'))

從fiddle fork

google.charts.load('current', {'packages':['line', 'controls']}); 
 
     google.charts.setOnLoadCallback(drawStuff); 
 

 
     function drawStuff() { 
 

 
     var dashboard = new google.visualization.Dashboard(
 
      document.getElementById('programmatic_dashboard_div')); 
 

 
     // We omit "var" so that programmaticSlider is visible to changeRange. 
 
     programmaticSlider = new google.visualization.ControlWrapper({ 
 
      'controlType': 'NumberRangeFilter', 
 
      'containerId': 'programmatic_control_div', 
 
      'options': { 
 
      'filterColumnLabel': 'Donuts eaten', 
 
      'ui': {'labelStacking': 'vertical'} 
 
      } 
 
     }); 
 

 
     programmaticChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'Line', 
 
     '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> 
 
     <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> 
 
     <table class="columns"> 
 
     <tr> 
 
      <td> 
 
      <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> 
 
      <div> 
 
       <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> 
 
       Select range [2, 5] 
 
       </button><br /> 
 
       <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> 
 
       Make the pie chart 3D 
 
       </button> 
 
      </div> 
 
      <script type="text/javascript"> 
 
       function changeRange() { 
 
       programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); 
 
       programmaticSlider.draw(); 
 
       } 
 

 
       function changeOptions() { 
 
       programmaticChart.setOption('is3D', true); 
 
       programmaticChart.draw(); 
 
       } 
 
      </script> 
 
      </td> 
 
      <td> 
 
      <div id="programmatic_chart_div"></div> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div>