3

円グラフに取り組んでおり、マウスを円グラフの上に置いたときに表示されるツールチップをカスタマイズしたいと考えています。現在、テキストは50 (50%)私が本当に言いたいところを示しています$50 (50%)。これを達成する方法は、Google チャート API では明確ではありません。どうすればいいですか？現在、私のJSコードは次のようになっています...

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

    var data = google.visualization.arrayToDataTable([
      ['Effort', 'Amount given'],
      ['first half',     50],
      ['second half',     50]
    ]);

    var options = {
      pieHole: 0.5,
      pieSliceTextStyle: {
        color: 'black',
      },
      legend: 'none'
    };

    var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
    chart.draw(data, options);
  }

JSFiddle

4

1 に答える 1

2

Google charts API でツールチップを指定する方法の例を次に示します。

関連するドキュメントを次に示します。

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

function drawChart() {

  data = new google.visualization.DataTable();
  data.addColumn('string', 'Effort');
  data.addColumn('number', 'Amount given');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['first half', 50, "$50 (50%)"],
    ['second half', 50, "$50 (50%)"]
  ]);

  var options = {
    pieHole: 0.5,
    pieSliceTextStyle: {
      color: 'black',
    },
    legend: 'none'
  };

  var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>

于 2016-02-19T20:38:03.967 に答える