动态谷歌图表的作用（间隔） [英] Role on dynamic google chart (interval)

问题描述

如何使用此功能： https://developers.google.com/chart/交互式/文档/角色，如果动态填充图表

How can I use this: https://developers.google.com/chart/interactive/docs/roles if I populate the graph dynamically?

这是我代码的一部分：

...
data.addRows(dates.length);
for (i = 0; i < dates.length; i++){
    if (i!=0){
        data.setValue( i, 0, new Date(dates[i]) ); 
        temp = graph[dates[i]];
        var j = 0;
        if (temp){
            for (j = 0; j < groups.length; j++){
                if ( groups[j] in temp){
                    var volume = parseFloat(temp[groups[j]]);
                    console.log(i + '  ' + j + '  ' + volume);
                    data.setValue( i, j+1, volume )
                }
            }
        }
    }else{
        data.setValue( i, 0, new Date(dates[i]) ); 
        var j = 0;
        for (j = 0; j < groups.length; j++){
            data.setValue( 0, j+1, 0 )
        }
    }
}
...

当我使用'data.setValue'设置值我也可以设定角色吗？ （我需要的间隔值）像'data.setRole'将是美好的东西！ ： - ）

After I set the value with 'data.setValue', how can I set also the role? (I need for the interval value) Something like 'data.setRole' would be wonderful!! :-)

推荐答案

您可以创建没有任何角色的 DataTable 然后创建一个 DataView ，将角色分配给视图中的列。该文档显示了如何执行此操作此处：

You can create the DataTable without any roles, and then create a DataView that assigns roles to the columns in the view. The documentation shows how to do this here:

DataView.setColumns 方法

DataView.setColumns Method

创建视图时，可以显式设置列的角色。
这在创建新的计算列时非常有用。有关更多信息，请参阅
DataView.setColumns（）。

When creating a view, you can explicitly set the role of a column. This is useful when creating a new calculated column. See DataView.setColumns() for more information.

DataView.setColumns（） 帮助文件解释如何执行以下操作：

The DataView.setColumns() help file explains how to do this as follows:

setColumns（columnIndexes）

1. columnIndexes - 数组和/或对象数组（可混合）：
   数字指定源数据列包含在视图中。数据是通过未经修改的。如果
   需要明确定义角色或其他列属性，
   将指定一个具有sourceColumn属性的对象。


2. 对象指定计算列。计算列为每行创建
   值，并将其添加到视图。对象
   必须具有以下属性：
   
   
   
   • calc [function] - 将为列中的每一行调用的函数，以计算该单元格的值。函数
     signature是func（dataTable，row），其中dataTable是源
     DataTable，row是源数据行的索引。
     函数应该返回由
     类型指定的类型的单个值。
   
   
   • type [string] - calc函数返回的值的JavaScript类型。
   
   
   • label [可选，字符串] - 指定给此生成列的可选标签。如果未指定，则视图列将不具有
     
     标签。
   
   
   • id [可选，字符串] - 要分配给生成的列的可选ID。 >
     
   • sourceColumn - [可选，数字]用作值的源列;如果指定，不要指定calc或type属性。
     
     这类似于传递一个数字而不是一个对象，但是
     
     可以指定一个角色和属性新列。
   
   
   • 属性[可选，对象] - 一个对象，其中包含要分配给此列的任意属性。如果未指定，则视图
     
     列将没有属性。
   
   
   • role [可选，字符串] - 要分配给此列的角色。如果未指定，则不会导入现有角色。
   
   

1. columnIndexes - An array of numbers and/or objects (can be mixed): Numbers specify the index of the source data column to include in the view. The data is brought through unmodified. If you need to explicitly define a role or additional column properties, specify an object with a sourceColumn property.
2. Objects specify a calculated column. A calculated column creates a value on the fly for each row and adds it to the view. The object must have the following properties:
   • calc [function] - A function that will be called for each row in the column to calculate a value for that cell. The function signature is func(dataTable, row), where dataTable is the source DataTable, and row is the index of the source data row. The function should return a single value of the type specified by type.
   • type [string] - The JavaScript type of the value that the calc function returns.
   • label [Optional, string] - An optional label to assign to this generated column. If not specified, the view column will have no
     label.
   • id [Optional, string] - An optional ID to assign to this generated column.
   • sourceColumn - [Optional, number] The source column to use as a value; if specified, do not specify the calc or the type property.
     This is similar to passing in a number instead of an object, but
     enables you to specify a role and properties for the new column.
   • properties [Optional, object] - An object containing any arbitrary properties to assign to this column. If not specified, the view
     column will have no properties.
   • role [Optional, string] - A role to assign to this column. If not specified, the existing role will not be imported.

$ b例如，如果您的间隔列为列＃3，则可以这样说：

So if your interval column is column #3, for instance, you would say:

dataView.setColumns （[0，1，{sourceColumn：2，role：'interval'}]）;

以上设置列0和1而第2列被分配为间隔列。

The above sets columns 0, and 1 as-is, without a role, while column 2 is assigned as an interval column.

编辑

响应评论，间隔在数据集中。这是一个例子：

Responding to the comments, the intervals are in the data set. Here is an example:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Interval A', 'Interval B'],
    ['2003',  100,   95,       125],
    ['2004',  110,   96,       150],
    ['2005',  120,   97,       175],
    ['2006',  130,   98,       200],
    ['2007',  140,   99,       225],
    ['2008',  150,   100,      250]
  ]);

  // Create Data View using columns 2 & 3 as intervals
  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}, {sourceColumn: 3, role: 'interval'}]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(dataView,
         {width:600, height:400,
          hAxis: {title: "Year"}}
        );
}

您将原始数据表中的间隔值包含为列。然后使用dataview将这些列更改为间隔角色列。然后绘制dataview。这将按预期提供错误栏（间隔列）。

You include the interval values in the original data table as columns. You then use a dataview to change those columns to 'interval' role columns. Then you draw the dataview. This will provide error bars (interval columns) as expected.

这篇关于动态谷歌图表的作用（间隔）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！