0

我正在尝试使用 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);

  }

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

4

1 回答 1

0

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

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

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

于 2016-08-26T12:02:06.260 回答