1

I'm using Google Visualization to display a target vs performance chart. The chart is split into a few months, and within each month, I have several departments, each with their own targets. The actual performance will be displayed using bar (column) charts, while I'm intending to have the targets displayed as a line. For now, I've chosen to use a stepped area chart with 0 opacity and disconnected lines for the targets, as recommended by this comment.

The issue now is that the stepped area chart displays across the entire category, but I need it to display only across a single column. Currently what I have is (copy and paste the code in the Google Code Playground to see the results):

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

​ I'm also open to other possible ideas of how to display a target vs performance chart, so other solutions that can also create such a chart would be greatly appreciated. Thanks.

4

1 回答 1

1

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

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/上的示例

于 2013-11-01T06:19:15.443 回答