javascript - 谷歌图表 : How do I add a label to grouped column chart

Question

我有一个用“经典”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>

Answer 1

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

annotation列应该在数据表中的series列之后

请参阅以下工作片段
在这里，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'
  });
});