Google图表：如何在新的Material图表中使用仪表板？

Question

It seems dashboard is only using the old way to load its library the way "Classic charts" use to. How can I get a dashboard to work with the new "Material" google charts? Specifically the line graph

Material chart jsfiddle: https://jsfiddle.net/yzhsf1gv/3/

Dashboard jsiddle: https://jsfiddle.net/job30vwy/

My native guess was

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

but that doesnt seem to work

Answer 1

seems to work here...?

just specify material chart in ChartWrapper chartType ...

'chartType': 'Line',

vs.

'chartType': 'LineChart',

use the same class name as you would specify here -->

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

from 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>