如何在栏上放置标签google.charts.Bar（） [英] how to put labels over the bars google.charts.Bar()

问题描述

我需要在我的google.chart.Bar （不是google.visualization.BarChart）上贴标签。图表已正确可视化，但仅在条形图上显示鼠标上的值，请帮助！！ / p>

无需鼠标悬停 < br>
将鼠标悬停在

数据来自隐藏的输入...此处代码：

  var data3 =新的google。 visualization.arrayToDataTable（[
 ['Ambitos'，'Programados'，'Terminados'，{角色：'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.getElem entById（ 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，
作用：  annotation}，3]）; 
 
 var options3 = {
图例：{位置：无}，
图表：{
标题：一般，
副标题： 'programados v / s terminados'}，
系列：{}，
轴：{y：{
距离：{label：}，}}，
 chartArea： {宽度： 95％，高度： 80％}}； 
 
 var chart3 = new google.charts.Bar（document.getElementById（’barras’））; 
 chart3.draw（data3，options3）; 
  

p.d。抱歉，我的英语不好！

解决方案

不幸的是，材料不支持注释（条形标签）图表

建议使用 Core 图表，并使用以下选项...

 主题：'material'
  

单独的注释列应为为每个系列列添加的

应该具有注释

使用DataView添加注释列时，

使用视图（ view3 ）绘制图表，

代替原始数据表（ data3 ）

请参阅以下工作摘要...

  google.charts.load（'current'，{回调：function（）{var data3 = new google.visualization.ar rayToDataTable（[[''Ambitos'，'Programados'，'Terminados'，{角色：'style'}]，['ex'，8，（8）-（6），'']，['ma'，6 ，（6）-（4），'']，['mo'，4，（4）-（2），'']，['re'，2，（2）-（1），''] ，['tx'，1，（1）-（0），'']]））； var view3 =新的google.visualization.DataView（data3）; view3.setColumns（[0，1，{calc： stringify，sourceColumn：1，类型： string，作用： annotation}，2，{calc： stringify，sourceColumn：2，类型： string ，role： annotation}，3]）; var options3 = {图例：{位置：无}，图表：{标题：恢复常规，副标题： programados v / s terminados}，系列：{}，轴：{y：{距离：{label ：''}，}}，chartArea：{宽度： 95％，高度： 80％}，主题：'material'}; var chart3 = new google.visualization.ColumnChart（document.getElementById（’barras’））; chart3.draw（view3，options3）; }，包：['corechart']}）;  

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

---

注意 ：材料无法使用的选项列表-> 跟踪物料图特征奇偶校验的问题

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!

解决方案

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

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