2

円グラフの形式でデータを表示するページがあります。私はGoogle Chartsを使用しています。コードは次のとおりです。

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product', 'Sale In Percent'],
        ['product2', 5.5],
        ['product3', 7.5],
        ['product4', 1.5],
        ['product5', 8.5],
        ]);

        var options = {
          title: 'Product Sales'
        };

       var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
        chart.draw(data, options);
      }
    </script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>

そして、ここに動作する JS FIDDLE があります: https://jsfiddle.net/alex4uthis/j78vmq00/2/

ここでは、product1 としてもう 1 つの製品があり、その値は 77 です。この値は常に高いため、グラフから省略しました。グラフを描画すると、product2 のパーセントが 23.9% になり、product3 のパーセントが 32.6 などになることがわかります。しかし、「Sale In Percent」列で指定した値で円グラフを描画したいと考えています。 5.5など...）これで私を助けてください。

4

1 に答える 1

1

合計が 100% 未満の円グラフを作成することはできないため、ライブラリは、渡された値の合計が 100% と見なされると想定しています。

77 を渡していないため、値の合計は 235.5/23 = 23.9%になります。7.5/23 = 32.6%

提供されたパーセンテージを読み取るラベルをチャートに表示したい場合、最初に行う必要があるのは、「スライスの量的値」でスライスにラベルを付けるpieSliceTextオプションを設定することです。value( https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options )

次に、ラベルにパーセント記号を表示したい場合は、チャートが次のようにレンダリングされた後に手動で追加するだけです。

[].slice.call(document.querySelectorAll('#piechart2 path + text'))
        .forEach(function(el) {
            el.textContent += '%';
        });

ここに実用的なフィドルがあります: https://jsfiddle.net/tq37y0p5/1/

于 2016-01-14T06:27:51.510 に答える