0

Google チャート 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);

  }

1 つのラベルが表示され、他のラベルは表示されないことに注意してください。

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 に答える