javascript - 如何在条形图上放置标签 google.charts.Bar()

Question

我需要在我的 google.chart.Bar 上放置标签 (不是 google.visualization.BarChart) 图表已正确可视化，但仅在鼠标悬停在条形图上时显示值，请帮助我!

without mouse over
with mouse over

数据取自隐藏的输入...这里是代码:

    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.抱歉我的英语不好!

Answer 1

不幸的是，Material 图表不支持注释(条形标签)

推荐使用 Core 图表，使用以下选项代替...

theme: 'material'

应为每个系列列添加一个单独的注释列，
应该有注释

当使用DataView添加注释列时，
务必使用 View (view3)绘制图表，
代替原来的数据表(data3)

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

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>

---

注意:Material 不可用的选项列表 --> Tracking Issue for Material Chart Feature Parity