我将如何制作一种堆积面积图？ [jQuery、谷歌图表等]答案

【问题标题】：How would I go about making a type of stacked area chart? [jQuery, Google Charts, etc]我将如何制作一种堆积面积图？ [jQuery、谷歌图表等]
【发布时间】：2012-06-11 17:44:24
【问题描述】：

我有一些数据需要制作图表。问题是数据具有价格范围。其中一些价格之间有一些重叠。此外，所有价格范围都有非零值的上限和下限。

这是一张图片，可以解释我想要完成的工作：

我一直在尝试找到适合我需要的 jQuery 图表或 Google 图表，但到目前为止还无法做到。有些东西接近我正在寻找的东西，例如阶梯图，但它们都有诸如“没有重叠值”或“从零开始”之类的要求。我也在考虑使用烛台图，但您无法真正区分重叠区域，这对我的数据集很重要。

这是可用的吗？我只是看错地方了吗？提前感谢您的帮助。

【问题讨论】：

标签： jquery charts google-visualization

【解决方案1】：

我对这类图表颇有经验。有关复杂示例，请参阅 my site。一个简化的解决方案可以这样编码：

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Fill data object, first row contains legend text, which in 
        // this example contains the calculation rules. 
        var data = google.visualization.arrayToDataTable([
          ['Month', 'min(Dataset1)', 'max(Dataset1)-min(Dataset1)', 
           'min(Dataset2)-max(Dataset1)', 'max(Dataset2)-min(Dataset2)', 
           'min(Dataset3)-max(Dataset2)', 'max(Dataset3)-min(Dataset3)'],
          ['2004/05', 1, 2, 2, 2, 5,4],
          ['2005/06', 2, 3, 1, 1, 3,3],
          ['2006/07', 3, 4, 0, 2, 0,2],
          ['2007/08', 3, 4, -1, 2, -5,2],
          ['2008/09', 4, 4, -2, 3, -9,1]
        ]);

        // Create and draw the visualization.
        var ac = new google.visualization.AreaChart(
         document.getElementById('visualization'));
        ac.draw(data, {
          isStacked: true,
          chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"}, 
          series: {
            0:{color: 'transparent'},
            2:{color: 'transparent'},
            4:{color: 'transparent'},
          }
        });
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

我们在上面的代码中所做的是复制系列的数量。每个系列之前都会有一个透明系列层，其高度与前一个系列的距离一样。

简化解决方案的屏幕截图：

复杂解决方案的截图：

【讨论】：

【解决方案2】：

您似乎想做一些类似于可视化天气系列数据的事情，这是我过去几个小时一直在尝试弄清楚的。

不能说我真的知道如何用 Google Charts 做你想做的事，但http://dygraphs.com/ 的图书馆看起来真的很时髦。

来自网站：

【讨论】：