charts - 为网站创建 100% 堆积面积图

Question

我正在尝试在我的网站上添加一个图表，显示收入如何在两方之间分配。它本质上是 excel 中的 100% 堆叠图，看起来像：

是否有可以嵌入到我们网站中的好（理想情况下便宜，因为我发现唯一可以做到的是 Highcharts，它看起来很棒，但对于我们正在做的事情来说并不便宜）工具？理想情况下，如果用户可以选择某个价格并且它会显示以下两者的百分比，那就太好了，但这只是一个很好的选择。有什么建议么？我查看了谷歌图表，但没有找到可以以这种格式显示数据的图表。

Answer 1

你可以用谷歌图表做到这一点。

假设您有一堆不一定匹配相同比例的数字，您可以创建一个简单的函数来比较每一行数字并根据它们之间的比例进行调整：

function drawVisualization() {
  // add data in number form
  var data = google.visualization.arrayToDataTable([
    ['X', 'Andrew', 'Peter'],
    [100, 100, 100],
    [200, 35, 65],
    [400, 64, 144],
    [1000, 30, 70],
    [3000, 400, 1600],
  ]);

  // adjust data

  for(var i = 0; i < data.getNumberOfRows(); i++){
    var valA = data.getValue(i, 1);
    var valB = data.getValue(i, 2);
    var valTotal = valA + valB;
    data.setValue(i, 1, valA/valTotal);
    data.setValue(i, 2, valB/valTotal);
  };

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    isStacked: true,
    vAxis: {format: "0%",},
    width: 600,
    height: 400,
  });
}

这就是它最终的样子（我真的把你的数据弄傻了，所以线条没有被平滑——不幸的是，面积图目前不允许沿着curveType折线图选项的线条平滑线条）：

Answer 2

您可以使用stacking: 'percent'选项。

http://jsfiddle.net/Tdk62/

http://api.highcharts.com/highcharts#plotOptions.area.stacking