【问题标题】:Google Chart Pie Chart Offset for all data所有数据的谷歌图表饼图偏移
【发布时间】:2014-08-25 18:23:59
【问题描述】:

您好,我希望 Google 饼图中的所有切片都应偏移, 我有一个使用硬编码偏移切片的示例。但是我需要所有的切片都应该偏移到一个特定的值。

我的例子是:

<html>
  <head>
    <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([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

【问题讨论】:

  • 只需遍历数据中的所有行并将该行的切片对象添加到选项中
  • 您希望切片都具有相同的偏移量吗?如果不是,偏移量应该如何确定?
  • 我希望所有的饼图都应该有相同的偏移量,而不像 4: {offset: 0.2},2: {offset: 0.3},...

标签: charts google-visualization


【解决方案1】:
for(i = 0;i < data.getNumberOfRows();i++){
     offsetObj[i] = {offset:0.4};
}

这是填充对象的解决方案,例如 {4: {offset: 0.4}, 12: {offset: 0.4}, 14: {offset: 0.4},15: {offset: 0.4},}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多