Question

我正在使用Google Visualization来显示目标与效果图表。图表分为几个月，在每个月内，我有几个部门，每个部门都有自己的目标。实际性能将使用条形图（列）显示，而我打算将目标显示为一条线。现在，我已经选择使用0 {0}}评论建议的步长区域图表，其中0不透明度和断开的线条为目标。

现在的问题是阶梯区域图表显示在整个类别中，但我需要它只显示在一个列上。目前我所拥有的是（将代码复制并粘贴到Google Code Playground以查看结果）：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05',  165,      938,         522,             998,           450,      614.6],
    ['2005/06',  135,      1120,        599,             1268,          288,      682],
    ['2006/07',  157,      1167,        587,             807,           397,      623],
    ['2007/08',  139,      1110,        615,             968,           215,      609.4],
    ['2008/09',  136,      691,         629,             1026,          366,      569.6]
 ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    connectSteps: false, 
    series: {3: {type: "steppedArea", areaOpacity: 0}}
  });
}

我也对如何显示目标与性能图表的其他可能想法持开放态度，因此非常感谢能够创建此类图表的其他解决方案。感谢。

Answer 1

使用“interval”列角色添加与列对齐的小水平线：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Y1');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addColumn('number', 'Y2');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addRows([
    ['Jan', 5, 7, 4, 10],
    ['Feb', 3, 4, 8, 6],
    ['Mar', 6, 3, 6, 8],
    ['Apr', 2, 5, 3, 6]
]);

参见http://jsfiddle.net/asgallant/M7YTG/2/

的示例

Google Visualization中的多个目标行

1 个答案: