Charts 为网站创建100%堆叠面积图

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

---

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

你可以用谷歌图表来实现这一点

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

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,
  });
}

函数drawVisualization（）{
//以数字形式添加数据
var data=google.visualization.arrayToDataTable([
['X'、'安德鲁'、'彼得']，
[100, 100, 100],
[200, 35, 65],
[400, 64, 144],
[1000, 30, 70],
[3000, 400, 1600],
]);
//调整数据
对于（var i=0；i

这就是它最终的样子（我确实简化了数据，因此线条没有平滑——不幸的是，面积图目前不允许沿着线条图的

curveType

选项的线条平滑）：

---

你可以用谷歌图表来实现这一点

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

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,
  });
}

函数drawVisualization（）{
//以数字形式添加数据
var data=google.visualization.arrayToDataTable([
['X'、'安德鲁'、'彼得']，
[100, 100, 100],
[200, 35, 65],
[400, 64, 144],
[1000, 30, 70],
[3000, 400, 1600],
]);
//调整数据
对于（var i=0；i

这就是它最终的样子（我确实简化了数据，因此线条没有平滑——不幸的是，面积图目前不允许沿着线条图的

curveType

选项的线条平滑）：

---

您可以使用

堆叠：“百分比”

选项

---

您可以使用

堆叠：“百分比”

选项

---

谢谢，这真的很有帮助Hanks，这真的很有帮助看起来很光滑，我尝试过你的建议，但是我无法像谷歌图表那样通过json加载数据-看看关于加载看起来很光滑的数据的文章，我尝试过你的建议，然而，我无法像使用谷歌图表那样通过json加载数据——请看关于加载数据的文章