Google 图表：如何将仪表板与新的 Material 图表一起使用？

Question

似乎dashboard 仅使用旧方式加载其库，就像“经典图表”使用的方式一样。如何让仪表板与新的“材料”谷歌图表一起使用？特别是line graph

材质图jsfiddle：https://jsfiddle.net/yzhsf1gv/3/

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

我的原生猜测是

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

但这似乎不起作用

Answer 1

似乎在这里工作......？

只需在ChartWrapperchartType指定材质图表...

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