Google图表：如何在新材料图表中使用仪表板？

1 回答

• 2

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

  只需在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>
  
                <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>
  

  回复于 2024-04-30T16:11:24+08:00