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

问题描述

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

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!.

无鼠标悬停
鼠标悬停

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

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

p.d. sorry for my bad english!

推荐答案

很遗憾，Material 图表不支持注释(条形标签)

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

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

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

使用DataView添加注解列时，
请务必使用视图 (view3) 绘制图表，
而不是原始数据表(data3)

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>

注意:Material 不可用的选项列表 --> 物料图表功能奇偶校验的跟踪问题

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

这篇关于如何在条形图上放置标签 google.charts.Bar()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！