angularjs - 谷歌饼图中的零值

Question

我正在使用 angularjs 和 Google 图表。

如何在 Google 饼图中包含零值？我可以通过包含 sliceVisibilityThreshold: 0 在图例中显示它 see screenshot to see what I already have

但我想要的是在图例和图表中显示它:display zero value in pie chart like this

有什么办法可以实现我想要的吗？我在谷歌论坛中搜索但找不到任何解决方案。提前致谢。

Answer 1

使用 legend.position: 'labeled' 的选项显示零值一行

  legend: {
    position: 'labeled'
  },

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "Country", "type": "string"},
        {"label": "# of Devices", "type": "number"}
      ],
      "rows": [
        {"c": [{"v": "Canada"}, {"v": 0}]},
        {"c": [{"v": "Mexico"}, {"v": 33}]},
        {"c": [{"v": "USA"}, {"v": 34}]}
      ]
    });

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.PieChart(container);

    chart.draw(data, {
      height: 400,
      legend: {
        position: 'labeled'
      },
      sliceVisibilityThreshold: 0,
      width: 600
    });
  },
  packages:['corechart']
});

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