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

我试图为每个条形图单元格设置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);
 }

//加载可视化API和piechart包。
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=new google.visualization.DataTable（）；
var原始数据=[
[A'，40]，
[B'，17]，
[C'，7]
];
data.addColumn（'string'，'Columns'）；
对于（变量i=0；i

您没有正确格式化数据

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

值标签（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

来修复

---

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

如果没有鼠标悬停在Google Visualization API中，则无法显示工具提示。您需要编写自定义javascript来编写自己的工具提示，或者找到一种方法，让google

svg

无需鼠标即可显示工具提示。不管是哪种方式，这都是一件令人头痛的事情。我问的是在x轴或水平轴上有单独的标签，用上述方法，我无法在水平轴上显示列名。你能更好地解释一下你的意思吗？它显示的是什么，您希望它显示什么？它将第_行数据中给出的数据显示为条形图，但它不会在水平轴上显示A、B和C等列名。感谢Jmac，您用很好的示例解决了我的问题！