使用google可视化api时,使用dashboard时如何使用getChartLayoutInterface()

Posted

技术标签:

【中文标题】使用google可视化api时,使用dashboard时如何使用getChartLayoutInterface()【英文标题】:When using the google visualization api, how do you use getChartLayoutInterface() when using a dashboard 【发布时间】:2021-10-30 12:27:54 【问题描述】:

我正在使用谷歌可视化仪表板 api。我有一个图表,我正在使用一个图表范围过滤器,有点像我在 jsfiddle 上找到的以下示例:

http://jsfiddle.net/dlaliberte/pfTqP/

这里是js小提琴代码:

html 代码:

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>

  </head>
  <body>
    <div id="dashboard">
        <div id="chart" style='width: 915px; height: 300px;'></div>
        <div id="control" style='width: 915px; height: 50px;'></div>
    </div>
  </body>
</html>

javascript 代码:

google.load('visualization', '1.1', packages: ['corechart', 'controls']);

function drawVisualization() 
  var dashboard = new google.visualization.Dashboard(
       document.getElementById('dashboard'));

   var control = new google.visualization.ControlWrapper(
     'controlType': 'ChartRangeFilter',
     'containerId': 'control',
     'options': 
       // Filter by the date axis.
       'filterColumnIndex': 0,
       'ui': 
         'chartType': 'LineChart',
         'chartOptions': 
           'chartArea': 'width': '90%',
             'hAxis': 'baselineColor': 'none', format: "dd.MM.yyyy" 
         ,
         // Display a single series that shows the closing value of the stock.
         // Thus, this view has two columns: the date (axis) and the stock value (line series).
         'chartView': 
           'columns': [0, 3]
         ,
         // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
         'minRangeSize': 86400000
       
     ,
     // Initial range: 2012-02-09 to 2012-03-20.
     'state': 'range': 'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)
   );

   var chart = new google.visualization.ChartWrapper(
     'chartType': 'CandlestickChart',
     'containerId': 'chart',
     'options': 
       // Use the same chart area width as the control for axis alignment.
       'chartArea': 'height': '80%', 'width': '90%',
       'hAxis': 'slantedText': false,
       'vAxis': 'viewWindow': 'min': 0, 'max': 2000,
       'legend': 'position': 'none'
     ,
     // Convert the first column from 'date' to 'string'.
     'view': 
       'columns': [
         
           'calc': function(dataTable, rowIndex) 
             return dataTable.getFormattedValue(rowIndex, 0);
           ,
           'type': 'string'
         , 1, 2, 3, 4]
     
   );

   var data = new google.visualization.DataTable();
   data.addColumn('date', 'Date');
   data.addColumn('number', 'Stock low');
   data.addColumn('number', 'Stock open');
   data.addColumn('number', 'Stock close');
   data.addColumn('number', 'Stock high');

  
   // Create random stock values, just like it works in reality.
   var open, close = 300;
   var low, high;
   for (var day = 1; day < 121; ++day) 
     var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
     change = change >= 0 ? change + 10 : change - 10;
     open = close;
     close = Math.max(50, open + change);
     low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
     low = Math.max(0, low);
     high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
     var date = new Date(2012, 0 ,day);
     data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]);
   

  /* Change the format of the date column, used in chart, but not chart range filter */  
  var formatter = new google.visualization.DateFormat(pattern: "dd.MM.yyyy");
  formatter.format(data, 0);

  
   dashboard.bind(control, chart);
   dashboard.draw(data);


google.setOnLoadCallback(drawVisualization);

起初我只有一个简单的图表,并且能够使用 getChartLayoutInterface() 获取图表的布局,但这不再起作用,因为我正在通过仪表板绘制图表,以便将其与我添加的 ChartRangeFilter。 (请参阅上面链接中的示例)。

我之所以需要这个,是因为我试图根据数据点在图表上的位置在图表顶部绘制图像,并且布局界面包含该信息。

【问题讨论】:

ChartRangeFilter 在控件内有一个嵌入的图表,不幸的是,它无法从外部访问。我们应该在控件上添加一个 getChart 方法以授予您访问权限。 ChartWrapper 有一个 getChart 方法,顺便说一句,仅记录在主要参考页面上。 @dialiberte 我正在使用与图表对齐的 html5 画布进行绘制。为什么即使我将它们排成一列,但当我使用 ChartRangeFilter 和 Dashboard 时,这些位置现在已经关闭,而在我不使用它们时正好排成一列? 【参考方案1】:

首先,等待图表包装器上的就绪事件。 然后使用getChart 方法从图表包装器中获取图表。 然后就可以正常获取界面了...

var chart = new google.visualization.ChartWrapper(
  'chartType': 'CandlestickChart',
  'containerId': 'chart',
  'options': 
    // ...
  
);

google.visualization.events.addListener(chart, 'ready', function () 
  var layout = chart.getChart().getChartLayoutInterface();
);

【讨论】:

谢谢,我让它工作了。现在唯一的问题是,自从添加了图表范围过滤器和仪表板后,这些位置就被关闭了。他们以前没问题的地方。我知道是因为我有一个画布,位于其下方,与 CSS 对齐,并通过检查元素周围的边框来验证这一点。这些位置不再与画布对齐,所以我仍然无法在正确的位置绘制。 您可能可以使用getChartAreaBoundingBox 方法来计算偏移量。没有更多细节很难说......

以上是关于使用google可视化api时,使用dashboard时如何使用getChartLayoutInterface()的主要内容,如果未能解决你的问题,请参考以下文章

我可以在 Java Swing 应用程序中使用 Google Visualization API 吗?

IE8 Google 可视化权限被拒绝

Elasticsearch 可视化管理工具

使用官方API可视化codeforces.com中的用户数据

使用Chartrangeslider进行Google可视化,并从Google文档电子表格导入数据

使用记录范围时,Google 保留 API 以无效范围响应