如何向细分的Google图表添加注释？

Question

我有2个谷歌条形图，一个堆叠，一个没有。我需要为两个图表中的每个段添加注释。我怎么能这样做？

google.load('visualization', '1', {
  'packages': ['corechart', 'table']
});
google.setOnLoadCallback(drawCharts);

function drawCharts() {
  drawSixMonthHistory();
  drawTagBreakdown();
};


function drawSixMonthHistory() {
  var data = google.visualization.arrayToDataTable([
    ["Calendars", "Calendar A", "Calendar B", "Calendar C"],
    ["Dec, 2015", 0, 0, 0],
    ["Jan, 2016", 0, 0, 0],
    ["Feb, 2016", 0, 0, 0],
    ["Mar, 2016", 0, 0, 0],
    ["Apr, 2016", 3, 0, 2],
    ["May, 2016", 6, 2, 1]
  ]);
  var view = new google.visualization.DataView(data);

  var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthHistory'));
  chart.draw(view, {
    fontName: 'Roboto',
    enableInteractivity: false,
    backgroundColor: 'transparent',
    annotations: {
      alwaysOutside: true
    },
    chartArea: {
      width: '90%'
    },
    vAxis: {
      viewWindowMode: 'explicit',
      format: '##0',
      viewWindow: {
        min: 0
      }
    },
    legend: {
      position: 'bottom',
      maxLines: 3
    },
    isStacked: true
  });
}

function drawTagBreakdown() {
  var data = google.visualization.arrayToDataTable([
    ["tags", "Tag A", "Tag B", "Tag C"],
    ["Dec, 2015", 0, 0, 0],
    ["Jan, 2016", 0, 0, 0],
    ["Feb, 2016", 0, 0, 0],
    ["Mar, 2016", 0, 0, 0],
    ["Apr, 2016", 3, 1, 3],
    ["May, 2016", 2, 1, 5]
  ]);
  var view = new google.visualization.DataView(data);

  var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthTagHistory'));
  chart.draw(view, {
    fontName: 'Roboto',
    enableInteractivity: false,
    backgroundColor: 'transparent',
    annotations: {
      alwaysOutside: true
    },
    chartArea: {
      width: '90%'
    },
    vAxis: {
      viewWindowMode: 'explicit',
      format: '##0',
      viewWindow: {
        min: 0
      }
    },
    legend: {
      position: 'bottom',
      maxLines: 3
    }
  });
}

jsfiddle

Answer 1

您可以使用view.setColumns为每个值添加annotation columns

参见以下示例......

google.charts.load('current', {packages: ['corechart', 'table']});
google.charts.setOnLoadCallback(drawCharts);

function drawCharts() {
  drawSixMonthHistory();
  drawTagBreakdown();
};

function drawSixMonthHistory() {
  var data = google.visualization.arrayToDataTable([
    ["Calendars", "Calendar A", "Calendar B", "Calendar C"],
    ["Dec, 2015", 0, 0, 0],
    ["Jan, 2016", 0, 0, 0],
    ["Feb, 2016", 0, 0, 0],
    ["Mar, 2016", 0, 0, 0],
    ["Apr, 2016", 3, 0, 2],
    ["May, 2016", 6, 2, 1]
  ]);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    },
    3,
    {
      calc: "stringify",
      sourceColumn: 3,
      type: "string",
      role: "annotation"
    }
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthHistory'));
  chart.draw(view, {
    fontName: 'Roboto',
    enableInteractivity: false,
    backgroundColor: 'transparent',
    annotations: {
      //alwaysOutside: true
    },
    chartArea: {
      width: '90%'
    },
    vAxis: {
      viewWindowMode: 'explicit',
      format: '##0',
      viewWindow: {
        min: 0
      }
    },
    legend: {
      position: 'bottom',
      maxLines: 3
    },
    isStacked: true
  });
}

function drawTagBreakdown() {
  var data = google.visualization.arrayToDataTable([
    ["tags", "Tag A", "Tag B", "Tag C"],
    ["Dec, 2015", 0, 0, 0],
    ["Jan, 2016", 0, 0, 0],
    ["Feb, 2016", 0, 0, 0],
    ["Mar, 2016", 0, 0, 0],
    ["Apr, 2016", 3, 1, 3],
    ["May, 2016", 2, 1, 5]
  ]);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    },
    3,
    {
      calc: "stringify",
      sourceColumn: 3,
      type: "string",
      role: "annotation"
    }
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthTagHistory'));
  chart.draw(view, {
    fontName: 'Roboto',
    enableInteractivity: false,
    backgroundColor: 'transparent',
    annotations: {
      alwaysOutside: true
    },
    chartArea: {
      width: '90%'
    },
    vAxis: {
      viewWindowMode: 'explicit',
      format: '##0',
      viewWindow: {
        min: 0
      }
    },
    legend: {
      position: 'bottom',
      maxLines: 3
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sixMonthHistory"></div>
<div id="sixMonthTagHistory"></div>

另外，建议使用loader.js代替旧库jsapi 见Load the Libraries