Question

我正在尝试在我的网站中使用Google Dashboard，Charts和Wrapper类。我为它写了一个简单的测试应用程序，我将它带到下面;

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls','charteditor']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var wrapper = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
		  'dataTable': data,
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });
		var chartEditor = new google.visualization.ChartEditor();
		google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
			  
		
		// On "OK" save the chart to a <div> on the page.
		function redrawChart(){
			chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
			dashboard.bind(donutRangeSlider, chartEditor.getChartWrapper());
		}
        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, wrapper);

        // Draw the dashboard.
        dashboard.draw(data);
		
		var button = document.createElement('button');
		button.textContent = "Edit me";
		button.onclick = () => chartEditor.openDialog(wrapper, {});
		document.body.appendChild(button);
		
		setInterval(updateChart, 5000);
		function updateChart() 
		{
			let rand = Math.floor(Math.random()*10);
      /************* THE FOLLOWING TWO LINES IS WORKING ****************************/
			data.addRow(['Reza' + rand, rand]); 
			dashboard.draw(data);
      /************* THE FOLLOWING TWO LINES IS NOT WORKING ****************************/
			//wrapper.getDataTable().addRow(['Reza' + rand, rand]);
			//dashboard.draw(wrapper.getDataTable());
		}
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

我的问题是我的图表包装器的“getDataTable”函数没有“addRow”函数。它似乎返回DataView而不是DataTable。我不想保留我的数据的引用，因为它应该在包装器中！无论如何，任何帮助都会受到欢迎。

Answer 1

绘制仪表板时，它似乎使用数据视图覆盖包装器上的数据表

使用方法可以很容易地将其更改回普通数据表 - ＆gt; toDataTable()

var wrapperData = wrapper.getDataTable().toDataTable();
wrapperData.addRow(['Reza' + rand, rand]);
dashboard.draw(wrapperData);

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart', 'controls', 'charteditor']
}).then(drawDashboard);

function drawDashboard() {
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Donuts eaten'],
    ['Michael' , 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  );

  var donutRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'NumberRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Donuts eaten'
    }
  });

  var wrapper = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div',
    options: {
      width: 300,
      height: 300,
      pieSliceText: 'value',
      legend: 'right'
    }
  });

  var chartEditor = new google.visualization.ChartEditor();
  google.visualization.events.addListener(chartEditor, 'ok', redrawChart);

  function redrawChart(){
    chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
    dashboard.bind(donutRangeSlider, chartEditor.getChartWrapper());
  }

  dashboard.bind(donutRangeSlider, wrapper);
  dashboard.draw(data);

  var button = document.createElement('button');
  button.textContent = "Edit me";
  button.onclick = () => chartEditor.openDialog(wrapper, {});
  document.body.appendChild(button);

  setInterval(updateChart, 5000);
  function updateChart() {
    let rand = Math.floor(Math.random()*10);

    var wrapperData = wrapper.getDataTable().toDataTable();
    wrapperData.addRow(['Reza' + rand, rand]);
    dashboard.draw(wrapperData);
  }
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>

＆＃13;

如何在Google Charts中获取DatatTable

1 个答案: