Google图表(可视化)中堆积条形图中的第三个条形图无效

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google图表(可视化)中堆积条形图中的第三个条形图无效相关的知识,希望对你有一定的参考价值。

我使用谷歌图表(谷歌可视化),它工作正常。但现在,我在动画中遇到了一个奇怪的问题。这是一个堆积的条形图。前两列(条形)完美无瑕地动画,但第三列(条形)立即出现,动画不适用于最后一个条形(第三列)。

我试过总共2个酒吧,现在第二个酒吧的动画不起作用(马上就来了)。很明显,问题在最后一栏。这是Google Chart最终的堆积条形图中的缺陷吗?

这是我的代码:

            var data = google.visualization.arrayToDataTable([
            ['Status', awating, not_interested, interested, { role: 'annotation' }],
            ['SANDRA COOMBS', 2, 4, 2, ''],
            ['VINCENT ODA', 2, 2, 2, ''],
        ]);
        arTotal = niTotal = iTotal = 0;
        for (var i = 0; i < data.getNumberOfRows(); i++) {
            if (data.getValue(i, 1) != null) {
                arTotal += data.getValue(i, 1);
            }
            if (data.getValue(i, 2) != null) {
                niTotal += data.getValue(i, 2);
            }
            if (data.getValue(i, 3) != null) {
                iTotal += data.getValue(i, 3);
            }
        }
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
            {
                calc: "stringify",
                sourceColumn: 1,
                type: "string",
                role: "annotation"
            },
            2, {
                calc: "stringify",
                sourceColumn: 2,
                type: "string",
                role: "annotation"
            },
            3, {
                calc: "stringify",
                sourceColumn: 3,
                type: "string",
                role: "annotation"
            }]);
        var options = {
            legend: {
                position: 'none'
            },
            chartArea: { width: width, height: height, right: right },
            isStacked: true,
            orientation: orientation.orientation,
            colors: ['#008FBE', '#BE1E2D', '#00BD90'],
            fontSize: '12',
            fontName: 'OpenSans-Regular',
            hAxis: {
                viewWindowMode: 'maximized',
            },
            vAxis: {
                viewWindowMode: 'maximized',
            },
            animation: {
                startup: true,
                duration: 1500,
                easing: 'out',
            },
        };
        var chart = new google.visualization.ColumnChart(document.getElementById("currentStatusChart"));
        google.visualization.events.addListener(chart, 'ready', readyHandler);
        chart.draw(view, options);
答案

我在startup上使用动画时遇到了各种错误, 特别是当使用DataView绘制图表时

解决方法是在绘制图表之前将DataView转换为DataTable, 你可以使用方法 - > toDataTable()

view.toDataTable()

这似乎有助于这种情况, 请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
      ['Status', 'awating', 'not_interested', 'interested', { role: 'annotation' }],
      ['SANDRA COOMBS', 2, 4, 2, ''],
      ['VINCENT ODA', 2, 2, 2, ''],
  ]);
  arTotal = niTotal = iTotal = 0;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
      if (data.getValue(i, 1) != null) {
          arTotal += data.getValue(i, 1);
      }
      if (data.getValue(i, 2) != null) {
          niTotal += data.getValue(i, 2);
      }
      if (data.getValue(i, 3) != null) {
          iTotal += data.getValue(i, 3);
      }
  }
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
      {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
      },
      2, {
          calc: "stringify",
          sourceColumn: 2,
          type: "string",
          role: "annotation"
      },
      3, {
          calc: "stringify",
          sourceColumn: 3,
          type: "string",
          role: "annotation"
      }]);
  var options = {
      legend: {
          position: 'none'
      },
      //chartArea: { width: width, height: height, right: right },
      isStacked: true,
      //orientation: orientation.orientation,
      colors: ['#008FBE', '#BE1E2D', '#00BD90'],
      fontSize: '12',
      fontName: 'OpenSans-Regular',
      hAxis: {
          viewWindowMode: 'maximized',
      },
      vAxis: {
          viewWindowMode: 'maximized',
      },
      animation: {
          startup: true,
          duration: 1500,
          easing: 'out',
      },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("currentStatusChart"));
  chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="currentStatusChart"></div>

以上是关于Google图表(可视化)中堆积条形图中的第三个条形图无效的主要内容,如果未能解决你的问题,请参考以下文章

在悬停时在堆积条形图上绘制水平线(图表 js)

在堆积条形图中反转 geom_text() (ggplot2)

将百分比标签添加到堆积条形图ggplot2

HighChart堆积条形图滚动条问题

Google Visualization堆积条形图:每个值的颜色和标签

spss如何删除堆积条形图中的某块数据