javascript - Google图表:如何向分组的柱形图添加标签

我有一个用“经典” corechart程序包生成的柱形图。

但是，我不明白如何将列值作为标签放置在每个栏的顶部。 （例如，最开始为8.50）。

这是我的代码：

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [
      "",
      "Hamburgers",
      "Pizzas",
      "Flutes",
      "Wraps"
    ],
    ["29-04-2017", 8.50, 8.2, 8.4, 5.5],
    ["13-05-2017", 8.60, 8.32, 8.53, 5.67],
    ["12-06-2017", 8.30, 8.72, 8.13, 5.37],
    ["23-08-2017", 8.50, 8.22, 8.43, 5.57]

  ]);
  var options = {
    chart: {
      title: ' ',
      animation: {
        duration: 2000,
        easing: "out",
        startup: true
      }
    },
    legend: {position:'top'},
    hAxis: { format: "date" },
    vAxis: {
      format: 'decimal',
      viewWindow:{
        max:10,
        min:0
      }
    },
    height: 400,
    bars: 'vertical',
    colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

最佳答案

您可以使用注释column role将标签添加到条形图

注释列应紧随数据表中的系列列

请参阅以下工作片段
在这里，DataView用于为每个系列添加注释列...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [
      "",
      "Hamburgers",
      "Pizzas",
      "Flutes",
      "Wraps"
    ],
    ["29-04-2017", 8.50, 8.2, 8.4, 5.5],
    ["13-05-2017", 8.60, 8.32, 8.53, 5.67],
    ["12-06-2017", 8.30, 8.72, 8.13, 5.37],
    ["23-08-2017", 8.50, 8.22, 8.43, 5.57]
  ]);

  // build view
  var viewColumns = [0];
  $.each(new Array(data.getNumberOfColumns() - 1), function (index) {
    viewColumns.push(index + 1);
    viewColumns.push({
      calc: function (dt, row) {
        return dt.getFormattedValue(row, index + 1);
      },
      role: 'annotation',
      type: 'string'
    });
  });
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var options = {
    chart: {
      title: ' ',
      animation: {
        duration: 2000,
        easing: "out",
        startup: true
      }
    },
    legend: {position:'top'},
    hAxis: { format: "date" },
    vAxis: {
      format: 'decimal',
      viewWindow:{
        max:10,
        min:0
      }
    },
    height: 400,
    bars: 'vertical',
    colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);

  $(window).resize(function() {
    chart.draw(view, options);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

如果您知道数据表中的列数，
那么您无需动态构建它们

setColumns方法采用一个数组，
数组中的每个条目都可以是列索引-> 0
或对象（如果使用计算列）...

{
  calc: function (dt, row) {
    return dt.getFormattedValue(row, 1);
  },
  role: 'annotation',
  type: 'string'
}

在这种情况下，我们需要包括数据表中的列，
以及每个注释列的计算列

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [
      "",
      "Hamburgers",
      "Pizzas",
      "Flutes",
      "Wraps"
    ],
    ["29-04-2017", 8.50, 8.2, 8.4, 5.5],
    ["13-05-2017", 8.60, 8.32, 8.53, 5.67],
    ["12-06-2017", 8.30, 8.72, 8.13, 5.37],
    ["23-08-2017", 8.50, 8.22, 8.43, 5.57]
  ]);

  // build view
  var view = new google.visualization.DataView(data);
  view.setColumns([
    0,  // <-- x-axis column index
    1,  // <-- first y-axis column index
    {   // annotation column for first y-axis column
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 1);  // get formatted value from first y-axis column
      },
      role: 'annotation',
      type: 'string'
    },
    2,  // <-- second y-axis column index
    {   // annotation column for second y-axis column
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 2);  // get formatted value from second y-axis column
      },
      role: 'annotation',
      type: 'string'
    },
    3,
    {
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 3);
      },
      role: 'annotation',
      type: 'string'
    },
    4,
    {
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 4);
      },
      role: 'annotation',
      type: 'string'
    }
  ]);

  var options = {
    chart: {
      title: ' ',
      animation: {
        duration: 2000,
        easing: "out",
        startup: true
      }
    },
    legend: {position:'top'},
    hAxis: { format: "date" },
    vAxis: {
      format: 'decimal',
      viewWindow:{
        max:10,
        min:0
      }
    },
    height: 400,
    bars: 'vertical',
    colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);

  $(window).resize(function() {
    chart.draw(view, options);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意

您无法使用常规for循环动态生成列的原因，
是因为我们要在对象中分配列索引

在这种情况下，参考保存到i

{
  calc: function (dt, row) {
    return dt.getFormattedValue(row, i);
  },
  role: 'annotation',
  type: 'string'
}

当循环结束并且在setColumns中使用了列时，
所有列均引用i，这是循环的最后一个值

在循环期间使用i的值，而不是对i的引用

那么所构建的对象必须在闭包或函数内部

这就是为什么在原始答案中使用$.each语句的原因

这将创建一个闭包，并使用index的值，
而不是引用index

$.each(new Array(data.getNumberOfColumns() - 1), function (index) {  // <-- this creates the closure...
  viewColumns.push(index + 1);
  viewColumns.push({
    calc: function (dt, row) {
      return dt.getFormattedValue(row, index + 1);
    },
    role: 'annotation',
    type: 'string'
  });
});