代码之家 › 专栏 › 技术社区 › Karl_S

谷歌可视化堆叠条形图中的标签值和总计

google-visualization charts

Karl_S · 技术社区 · 7 年前

我试图显示每个条形图的值,然后是堆叠条形图中所有条形图的总值。问题是,我得到了最后一个条形图的值和条形图外的总值。如果我不显示总数,我会得到条内的值。使用下面的代码,即使第二个条足够长以显示其标签,最后两个注释也位于第二个条之外。

<html>
  <head>
    <base target="_top">
  </head>
  <body>

         <h3>Registrations</h3>
         <div id="registrations_chart"></div>

  </body>
</html>
<script>
google.charts.load('current', {'packages':['corechart', 'bar', 'gauge', 'table']});

google.charts.setOnLoadCallback(drawStackedBar);

function drawStackedBar() {

  var myHeight = 350;
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Registrations');
  data.addColumn('number', 'Regular');
  data.addColumn('number', 'Work Study');

  data.addRows([
    ['Adult', 20, 12],
    ['Teen', 3, 0]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    1, {
      calc: function (dt, row) {
      return dt.getValue(row, 1);
    },
    type: "number",
    role: "annotation"
    },
    2, {
      calc: function (dt, row) {
      return dt.getValue(row, 2);
    },
    type: "number",
    role: "annotation"
    },
    // series 1
    {
      calc: function (dt, row) {
      return dt.getValue(row, 1) + dt.getValue(row, 2);
    },
    type: "number",
    role: "annotation"
    }
  ]);


  var options = {
    animation:{
      duration: 1000,
      easing: 'out',
      startup: true
    },
    title: 'Registrations',
    backgroundColor: 'transparent',
    height: myHeight, width: 500,
    legend: {
      position: 'top',
      maxLines: 3
    },
    bar: { groupWidth: '75%' },
    isStacked: true
  };
  var chart = new google.visualization.BarChart(document.getElementById('registrations_chart'));
  chart.draw(view, options);
}
</script>

如果我删除了setColumns中的最后一个选项,使该部分如下所示:

  view.setColumns([0,
    1, {
      calc: function (dt, row) {
      return dt.getValue(row, 1);
    },
    type: "number",
    role: "annotation"
    },
    2, {
      calc: function (dt, row) {
      return dt.getValue(row, 2);
    },
    type: "number",
    role: "annotation"
    },
    // series 1
    {
      calc: function (dt, row) {
      return dt.getValue(row, 1) + dt.getValue(row, 2);
    },
    type: "number",
    role: "annotation"
    }
  ]);

我得到了我想要的标签,没有总数,如下所示

我要做的是把总数加在最后,把标签放在里面,如下所示:

我尝试了太多的方法来记住或列在这里,但没有得到最后的总数。我怎样才能让最后一个标签出现,并让其他标签在合适的时候留在酒吧里?请注意,我已使红色条比蓝色条长,数字仍如图所示。

1 回复 | 直到 7 年前

WhiteHat 3 年前

您可以为总计添加另一个系列列

然后使用以下选项将其从图表中隐藏。。。

    enableInteractivity: false,
    tooltip: "none",
    visibleInLegend: false

这将允许其他值的注释正常执行

总注释将始终显示在外部,
但需要调整一些选项,以避免覆盖其他选项。。。

    annotations: {
      stem: {
        color: "transparent",
        length: 28
      },
      textStyle: {
        color: "#000000",
      }
    },

请参阅以下工作段。。。

google.charts.load('50', {
  packages:['corechart']
}).then(function () {
  var myHeight = 350;
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Registrations');
  data.addColumn('number', 'Regular');
  data.addColumn('number', 'Work Study');

  data.addRows([
    ['Adult', 20, 12],
    ['Teen', 3, 0]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    1, {
      calc: function (dt, row) {
        return dt.getValue(row, 1);
      },
      type: "number",
      role: "annotation"
    },
    2, {
      calc: function (dt, row) {
        return dt.getValue(row, 2);
      },
      type: "number",
      role: "annotation"
    },
    {
      calc: function (dt, row) {
        return 0;
      },
      label: "Total",
      type: "number",
    },
    {
      calc: function (dt, row) {
        return dt.getValue(row, 1) + dt.getValue(row, 2);
      },
      type: "number",
      role: "annotation"
    }
  ]);


  var options = {
    animation:{
      duration: 1000,
      easing: 'out',
      startup: true
    },
    title: 'Registrations',
    backgroundColor: 'transparent',
    height: myHeight, width: 500,
    legend: {
      position: 'top',
      maxLines: 3
    },
    bar: { groupWidth: '75%' },
    isStacked: true,
    series: {
      2: {
        annotations: {
          stem: {
            color: "transparent",
            length: 28
          },
          textStyle: {
            color: "#000000",
          }
        },
        enableInteractivity: false,
        tooltip: "none",
        visibleInLegend: false
      }
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('registrations_chart'));
  chart.draw(view, options);
});

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

编辑

注释位置没有标准选项
但是你可以手动移动它们,一旦图表 'ready'
或者在这种情况下 'animationfinish' 事件

请参阅以下工作片段,
总注释下移。。。

google.charts.load('50', {
  packages:['corechart']
}).then(function () {
  var myHeight = 350;
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Registrations');
  data.addColumn('number', 'Regular');
  data.addColumn('number', 'Work Study');

  data.addRows([
    ['Adult', 20, 12],
    ['Teen', 3, 0]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    1, {
      calc: function (dt, row) {
        return dt.getValue(row, 1);
      },
      type: "number",
      role: "annotation"
    },
    2, {
      calc: function (dt, row) {
        return dt.getValue(row, 2);
      },
      type: "number",
      role: "annotation"
    },
    {
      calc: function (dt, row) {
        return 0;
      },
      label: "Total",
      type: "number",
    },
    {
      calc: function (dt, row) {
        return dt.getValue(row, 1) + dt.getValue(row, 2);
      },
      type: "number",
      role: "annotation"
    }
  ]);


  var options = {
    animation:{
      duration: 1000,
      easing: 'out',
      startup: true
    },
    title: 'Registrations',
    backgroundColor: 'transparent',
    height: myHeight, width: 500,
    legend: {
      position: 'top',
      maxLines: 3
    },
    bar: { groupWidth: '75%' },
    isStacked: true,
    series: {
      2: {
        annotations: {
          stem: {
            color: "transparent",
          },
          textStyle: {
            color: "#000000",
          }
        },
        enableInteractivity: false,
        tooltip: "none",
        visibleInLegend: false
      }
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('registrations_chart'));

  google.visualization.events.addListener(chart, 'animationfinish', function () {
    $('#registrations_chart text[fill="#000000"]').each(function (index, annotation) {
      if (!isNaN(parseFloat(annotation.textContent))) {
        var yCoord = parseFloat($(annotation).attr('y'));
        $(annotation).attr('y', yCoord + 18);
      }
    });
  });

  chart.draw(view, options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="registrations_chart"></div>