Question

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

<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"
    }
  ]);

我在没有Total的情况下获得了我想要的标签，如下所示

我所追求的是将Total添加到最后并将标签始终保持在内部，如下所示：

我已经尝试了太多方法来记住或列出这里，但是最终没有获得总计。如何才能显示最后一个标签，并将其他标签放在条形图中？请注意，我使红色条比蓝色条长，数字仍然显示如图所示。

Answer 1

您可以为总计

添加另一个系列列

然后使用以下选项将其隐藏在图表中...

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

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

总注释总是显示在外面，
但需要调整一些选项以防止其他人覆盖...

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

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  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);
}

＆＃13;

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

＆＃13;

编辑

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

请参阅以下工作片段，
总注释向下移动......

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  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);
}

＆＃13;

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

＆＃13;

Google可视化堆积条形图中的标签值和总计

1 个答案: