how to put labels over the bars google.charts.Bar()

问题

I need to put labels over my google.chart.Bar (not google.visualization.BarChart) the chart is correctly visualized but only shows values on mouse over the bars,please helpme!.

without mouse over
with mouse over

the data is taked from hidden inputs... here the code :

    var data3 = new google.visualization.arrayToDataTable([
      ['Ambitos', 'Programados', 'Terminados',{ role: 'style' }],
      ['ex', parseInt(document.getElementById("sumex").value),(parseInt(document.getElementById("sumex").value))-( parseInt(document.getElementById("sumpex").value)),document.getElementById("sumex").value],
      ['ma', parseInt(document.getElementById("summa").value),(parseInt(document.getElementById("summa").value))-( parseInt(document.getElementById("sumpma").value)),document.getElementById("summa").value],
      ['mo', parseInt(document.getElementById("summo").value),(parseInt(document.getElementById("summo").value))-( parseInt(document.getElementById("sumpmo").value)),document.getElementById("summo").value],
      ['re', parseInt(document.getElementById("sumre").value),(parseInt(document.getElementById("sumre").value))-( parseInt(document.getElementById("sumpre").value)),document.getElementById("sumre").value],
      ['tx', parseInt(document.getElementById("sumtx").value),(parseInt(document.getElementById("sumtx").value))-( parseInt(document.getElementById("sumptx").value)),document.getElementById("sumtx").value]]);

    var view3 = new google.visualization.DataView(data3);
    view3.setColumns([0,1,2,
                   { calc: "stringify",
                     sourceColumn: 3,
                     type: "string",
                     role: "annotation" },3]);

    var options3 = {
        legend: { position: "none" },          
                chart: {
                title: 'Resumen General',
                subtitle: 'programados v/s terminados'},
       series: {},
         axes: {  y: {
                      distance: {label: ''}, } },
      chartArea : { width:"95%", height:"80%"} };

      var chart3 = new google.charts.Bar(document.getElementById('barras'));
      chart3.draw(data3, options3);

p.d. sorry for my bad english!

回答1:

unfortunately, annotations (bar labels) are not supported on Material charts

recommend using Core chart, with the following option instead...

theme: 'material'

an separate annotation column should be added for each series column,
that should have annotations

when using a DataView to add annotation columns,
be sure to draw the chart using the view (view3),
instead of the original data table (data3)

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data3 = new google.visualization.arrayToDataTable([
      ['Ambitos', 'Programados', 'Terminados',{ role: 'style' }],
      ['ex', 8,(8)-(6),''],
      ['ma', 6,(6)-(4),''],
      ['mo', 4,(4)-(2),''],
      ['re', 2,(2)-(1),''],
      ['tx', 1,(1)-(0),'']]);

    var view3 = new google.visualization.DataView(data3);
    view3.setColumns([0,
      1,
      {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
      },
      2,
      {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
      },
      3
    ]);

    var options3 = {
      legend: { position: "none" },
      chart: {
        title: 'Resumen General',
        subtitle: 'programados v/s terminados'
      },
      series: {},
      axes: {
        y: {
          distance: {label: ''},
        }
      },
      chartArea : {
        width:"95%",
        height:"80%"
      },
      theme: 'material'
    };

    var chart3 = new google.visualization.ColumnChart(document.getElementById('barras'));
    chart3.draw(view3, options3);
  },
  packages:['corechart']
});

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

note: list of options unavailable to Material --> Tracking Issue for Material Chart Feature Parity

来源：https://stackoverflow.com/questions/43534064/how-to-put-labels-over-the-bars-google-charts-bar

标签

javascript

charts

google-visualization

google-chartwrapper