问题：

如何在Google图表中获得DataTable

鄂琛

2023-03-14

<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。我不想保留我的数据的引用，因为它应该在包装中！无论如何，任何帮助都是欢迎的。

共有1个答案

吕学

2023-03-14

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

使用method-->todataTable()可以很容易地将其改回普通数据表

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

请参见下面的工作片段。..

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);
  }
}

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

类似资料：

如何在列表中获得最小值

这是我的doubht List chars=new ArrayList（）；上述列表中包含的值是[A， A， B， B， C， D， E]；我想得到一个作为输出，因为这是根据ascii的最小值。如何在java中获取此值。
Python-如何在matplotlib中获得多个子图？

问题内容：我对这段代码的工作方式有些困惑：在这种情况下，无花果轴如何工作？它有什么作用？同样为什么这项工作不能做同样的事情：问题答案：有几种方法可以做到这一点。该方法创建图形以及子图，然后将其存储在数组中。例如：但是，类似的事情也可以使用，但是并不是很“干净”，因为你要创建带有子图的图形，然后在其上添加：
如何在Keras中获得图层的权重？

问题内容：我正在使用Windows 10，Python 3.5和tensorflow 1.1.0。我有以下脚本：我得到错误：问题答案：如果您写：然后不是图层，而是图层的输出。该层是所以看来您的意思是：这是完整的代码段：
如何获得Google oauth2刷新令牌？

下面的代码使用Google oauth2机制登录用户。我们需要在用户离线时处理用户日历的更新，所以我们最终需要“刷新令牌”。grantOfflineAccess（）的结果是否返回刷新令牌（在下面，我可以看到response.code包含一个可能是刷新令牌的值）？我如何获得一个刷新令牌，可以用来（服务器端）创建新的访问键，以便离线访问用户的谷歌日历？
SwiftUI：如何在动态列表或LazyVStack中获得视图的框架

我想在一个LazyvStack中得到一个视图的框架。嵌入在ScrollView中的LazyVStack显示聊天消息（文本和图像）。因为内容的大小是动态的，所以我不能使用GeometryReader代理。在我的LazyVStack中放一个GeometryReader会破坏布局。（我想是因为动态尺寸。）。有没有其他方法来获得LazyvStack中视图的框架？下面是我想做的一个简单的表示。理想情况
如何在Google Drive SDK中获得文件修订的内容？

我试图使用google drive.NET SDK获取google drive（实际上是文档）文件的修订历史。我可以很好地获取给定文件的修订列表的元数据，但对于任何给定的修订，似乎DownLoadUrl字段总是为null，ExportLinks都指向文档的最新完整版本（即，不指向元数据指示的修订）。有什么建议吗？这就是它的工作原理吗？我注意到，API explorer中Remission对象的返

如何在Google图表中获得DataTable

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档