为网站创建100％堆积面积图 [英] Creating 100% stacked area graph for a website

问题描述

我想在我的网站上添加一个图表，显示收入是如何分配给双方的。它本质上是excel中的100％堆叠图，如下所示：

I am trying to add a chart to my website showing how income earned is divided between two parties. It is essentially the 100% stacked graph in excel that would look something like:

有一个很好的（理想地，便宜，因为唯一一个我发现，可能会做的是Highcharts，看起来不错，但它不便宜我们正在做）我们可以嵌入到我们的网站工具？理想情况下，如果用户可以选择一个特定的价格，它会显示两个百分比以下，这将是巨大的，但这只是一个很好的。有什么建议么？我查看了Google图表，但没有找到可以以此格式显示数据的图表。

Is there a good (ideally inexpensive, since the only one I've found that might do it is Highcharts, which looks great but it's not cheap for what we are doing) tool that we could embed into our website? Ideally it would be great if the user could select a certain price and it would show the percentage below for the two, but that is just a nice to have. Any suggestions? I looked at Google Charts but did not find one that could show the data in this format.

推荐答案

图表。

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

Assuming you have a bunch of numbers that don't necessarily match the same scale, you can just create a simple function to compare each row of numbers and adjust according to the ratio between them:

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

这是它最终看起来像（我真的dumbed你的数据，所以线不平滑 - 不幸的是，面积图目前不允许沿着线图的 curveType 选项的线平滑）：

这篇关于为网站创建100％堆积面积图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！