为条形图中的每个单元格启用标签

Question

我正在尝试使用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);
 }

Answer 1

您没有正确格式化数据。

系列名称位于不同的列中（每列将为图表添加新颜色，并为图例添加新项目。）

值标签（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'}]});
}

这是这样的：

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

你也会看到一些丑陋的图表，但可以通过将选项设置为isStacked: true来修复。

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