Question

我正在尝试使用google chart api显示每个切片上显示标签和百分比的饼图。似乎是显示标签和百分比的选项，因此我已禁用百分比显示，并尝试手动将其添加到标签。但是，当我在标签中使用百分比符号时，事情就开始起作用了。

我该如何解决这个问题？

JSFiddle：https://jsfiddle.net/phpsriptkiddie/gscdymqp/1/

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Phase', 'link', 'percentage'],
      ['Phase 1 25%', '/link1', 25],
      ['Phase 2 25%', '/link2', 25],
      ['Phase 3 50%', '/link3', 50],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 2]);
    var options = {
                pieSliceText: 'label',
      tooltip: {trigger: 'none'},
                slices: {
            0: { color: 'yellow', },
                        1: { color: 'green' },
            2: { color: 'grey' }            
                },
    };

    var chart = new google.visualization.PieChart( document.getElementById('piechart'));
    chart.draw(view, options);

    var selectHandler = function(e) {
     window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
    }

    // Add our selection handler.
    google.visualization.events.addListener(chart, 'select', selectHandler);

  }

请注意一个标签是如何显示的，而其他标签则不是。

Answer 1

似乎图表区域的大小根本不够大！ :-) 一旦我把它变大，问题就得到了解决。

    <div id="piechart" style="width: 900px; height: 500px;"></div>

https://jsfiddle.net/phpsriptkiddie/gscdymqp/2/

Google Chart API - 向饼图标签添加百分比

1 个答案: