为网站创建100％堆积区域图

Question

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

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

Answer 1

您可以使用Google Charts执行此操作。

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

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选项的线条平滑线条for Line Charts）：

Answer 2

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

http://jsfiddle.net/Tdk62/

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