Question

我有一张带有jquery flot的旧饼图。如果我的系列值是：

Apples: 1070
Bananas: 2127

饼图看起来像

2127 / 1070

目前，我有谷歌饼图。而且，据我所知，计数发生在其他方面： (1070 + 2127) / 1070

和

(1070 + 2127) / 2127.

因此，图表看起来不同。

有没有办法像老牌饼一样显示价值？

Answer 1

不确定如何加载数据，
但以下两个例子对我来说是一样的......

flot

$(document).ready(function() {
  var data = [
    {label: 'Apples', data: 1070, color: '#e1ab0b'},
    {label: 'Bananas', data: 2127, color: '#fe0000'}
  ];

  $.plot($("#chart-flot"), data, {
    series: {
      pie: {
        show: true
      }
    }
  });
});

body, html, .chart {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>
<div id="chart-flot" class="chart"></div>

谷歌

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Apples', 1070],
    ['Bananas', 2127]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 16,
      left: 16,
      right: 16,
      bottom: 16
    },
    colors: ['#e1ab0b', '#fe0000'],
    height: '100%',
    legend: {
      position: 'top',
      alignment: 'end'
    },
    width: '100%'
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart-google'));
  chart.draw(data, options);
});

body, html, .chart {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-google" class="chart"></div>

谷歌饼图与旧的邮票图表

1 个答案: