Question

使用Google饼图 Fiddle

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     20],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2]
        ]);

我怎样才能获得每天的小时数＆＃39;在图表中显示。现在它显示在工具提示鼠标悬停中。例如，Eat上的鼠标悬停将显示2.当我保存/打印图表时，我无法获得这些项目。如何在图表上显示这个？

Answer 1

pieSliceText configuration option可让您更改每个切片上显示的内容

获取行的值，使用...
pieSliceText: 'value'

另外，如果图表不够大，它将省略标签

有几种方法可以调整图表的大小你可以设置div容器的样式，
或者在选项中设置高度和宽度

此外，谷歌建议等待图表的'ready'事件，
在调用任何方法之前，包括getImageURI

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     20],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2]
    ]);

    var options = {
      height: 400,
      legend: {
        position: 'labeled',
        textStyle: {
          color: 'blue'
        }
      },
      pieSliceText: 'value',
      title: 'My Daily Activities',
      width: 800
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
    });

    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="image_div"></div>

在Chart上显示数据而不是工具提示

1 个答案: