1

我正在尝试为每个条形图单元格设置 A、B 和 C 的标签，以便我的所有数据都显示在图表上。我试过 data.addColumn('string', 'Alphabets'); 但这行不通。这应该很容易，但我错过了一些东西。

// Load the Visualization API and the piechart package.
 google.load('visualization', '1.0', {'packages':['corechart']});

 // Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(drawChart);

 // Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and
 // draws it.
 function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
var raw_data = [
    ['A', 40],
    ['B', 17],
    ['C', 7]
];
data.addColumn('string', 'Columns');
for (var i = 0; i < raw_data.length; ++i) {
    data.addColumn('number', raw_data[i][0]);
}
data.addRows(1);
data.setValue(0, 0, 'row');
for (var i = 0; i < raw_data.length; ++i) {
    data.setValue(0, i + 1, raw_data[i][1]);
}

 // Set chart options
 var options = {'title':'Megafon 27/10 2011',
             'width':1300,
             'height':600,
     'colors' : ['red', 'blue', 'green']
    };

 // Instantiate and draw our chart, passing in some options.
 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
 }
4

1 回答 1

0

您没有正确格式化数据。

系列名称位于单独的列中（每列将为图表添加一种新颜色，并为图例添加一个新项目）。

值标签（X 轴类别的名称）位于每行的第一列。您正在向后执行它们，因此没有轴标签。

例如，这段代码：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Data'],
    ['A', 10],
    ['B', 20],
    ['C', 40],
    ['D', 80]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
    draw(data,{});
}

创建此图：

示例图

但是，您希望每个系列都有不同的颜色（这是不好的可视化做法）。为此，您需要有 4 个不同的列来获得 4 种不同的颜色。

为此，您需要重新格式化数据，如下所示：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Color 1', 'Color 2', 'Color 3', 'Color 4'],
    ['A', 10, null, null, null],
    ['B', null, 20, null, null],
    ['C', null, null, 40, null],
    ['D', null, null, null, 80]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
    draw(data,{series: [{color: 'red'},{color: 'orange'},{color: 'yellow'},{color: 'green'}]});
}

结果是这样的：

示例图 2

那么问题是图例中有 4 个不同的系列，尽管它们只代表一种类型的数据（这就是为什么这是不好的可视化实践！）。

您还会得到一个看起来有点难看的图表，但这可以通过将选项设置为来修复isStacked: true。

无论如何，我只是将数据保留在您的数组中，而不是摆弄颜色。但是您的里程可能会有所不同。

于 2013-05-23T07:32:52.217 回答