javascript - 具有多个控件的数据 View

Question

我结合了网上找到的2个例子，不幸的是我一定做错了什么，因为 Jsfiddle 中只绘制了一部分

通过这两个示例，我想学习如何创建 DateSlider。有人可以指出我的错误吗？第一个例子来自https://blog.smalldo.gs/2013/04/google-chart-tools-walkthrough-part-3/#add-to-dashboard第二个例子来自interactive charts

google.setOnLoadCallback(drawChart);
function drawChart() {
    var dashboard = new google.visualization.Dashboard(document.getElementById('programmatic_dashboard_div'));


    var data = new google.visualization.DataTable();
        data.addColumn('number', 'Drie');
        data.addColumn('string', 'Name');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Donuts eaten'); 
        data.addColumn('number', 'Hours Worked');


    data.addRows([
        [33333333,'Michael', new Date(2012,0,2),1,9],
        [33333,'Elisa', new Date(2012,0,3),7,8],
        [3,'Robert', new Date(2012,0,4),9,10],
        [3,'John', new Date(2012,0,5),7,8],
        [3,'Jessica', new Date(2012,0,6),3,5],
        [3,'Aaron', new Date(2012,0,6),7,4],
        [3,'Margareth', new Date(2012,0,7),7,3]
    ]);

    // 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': 'PieChart',
        'containerId': 'programmatic_chart_div',
        'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
        }
    });

    dashboard.bind(programmaticSlider, programmaticChart);

    //Create a DataView from the data_table
    var dataView = new google.visualization.DataView(data);

    //Set the first column of the dataview to format as a string, and return the other columns [1, 2 and 3]
   dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1, 2, 3,4]);

    // Create a date range slider
    var myDateSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control_div',
        'options': {
            'filterColumnLabel': 'Date'
        }
  });

  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
      'chartType' : 'Table',
      'containerId' : 'table_div'
  });

  dashboard.bind(myDateSlider, myTable);


  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
      'chartType' : 'LineChart',
      'containerId' : 'line_div',
  });      

  dashboard.bind(myDateSlider, myLine ); 

  dashboard.draw(dataView);
  }
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls']}]}"></script>
  <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>
  <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>
<!-- // <div id="dashboard_div">-->   

<!-- // this is the end -->

Answer 1

通过以下两项更改更改您的代码，

首先

<!-- Put following jsapi library on top, i.e load it before you execute 'google.setOnLoadCallback' -->

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls']}]}"></script>

第二，

function changeOptions() {
   programmaticChart.setOption('is3D', true);

   //Added following line in your code, 'setView'
   programmaticChart.setView({'columns': [0, 4]});

   programmaticChart.draw();
}

对于日期 slider ，请按照此 documentation