0

如果我动态填充图表，我该如何使用：https ://developers.google.com/chart/interactive/docs/roles？

这是我的代码的一部分：

...
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'这样的东西会很棒！:-)

4

1 回答 1

4

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

DataView.setColumns方法

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

DataView.setColumns() 帮助文件解释了如何执行此操作，如下所示：

setColumns(columnIndexes)

  1. columnIndexes - 数字和/或对象的数组（可以混合）：数字指定要包含在视图中的源数据列的索引。数据是通过未修改的。如果需要显式定义角色或其他列属性，请指定具有 sourceColumn 属性的对象。
  2. 对象指定计算列。计算列为每一行动态创建一个值并将其添加到视图中。该对象必须具有以下属性：
    • calc [function] - 将为列中的每一行调用一个函数，以计算该单元格的值。函数签名为func(dataTable, row)，其中dataTable为源DataTable，row为源数据行的索引。该函数应返回由 type 指定的类型的单个值。
    • type [string] - calc 函数返回的值的 JavaScript 类型。
    • label [可选，字符串] - 分配给此生成列的可选标签。如果未指定，则视图列将没有
      标签。
    • id [可选，字符串] - 分配给此生成列的可选 ID。
    • sourceColumn - [可选，数字] 用作值的源列；如果指定，请不要指定 calc 或 type 属性。
      这类似于传入数字而不是对象，但
      允许您为新列指定角色和属性。
    • properties [可选，对象] - 包含要分配给此列的任意属性的对象。如果未指定，则视图
      列将没有属性。
    • 角色 [可选，字符串] - 分配给该列的角色。如果未指定，则不会导入现有角色。

因此，如果您的区间列是第 3 列，例如，您会说：

dataView.setColumns([0, 1, {sourceColumn: 2, role: 'interval'}]);

上面设置了第 0 列和第 1 列，没有角色，而第 2 列被分配为间隔列。

编辑

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

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

您将原始数据表中的区间值作为列包含在内。然后，您使用数据视图将这些列更改为“间隔”角色列。然后绘制数据视图。这将按预期提供误差线（间隔列）。

于 2013-02-12T05:04:25.947 回答