積み重ねたエリアグラフの作成についてはどうすればよいですか？ [jQuery、Google Chartsなど]

グラフを作成するために必要なデータがあります。問題は、データに価格の範囲があることです。これらの価格の中には、それらの間にいくらかの重複があります。さらに、すべての価格帯にゼロ値ではない上限と下限があります。ここで積み重ねたエリアグラフの作成についてはどうすればよいですか？ [jQuery、Google Chartsなど]

は種類の私が達成するために探していますされるかを説明するためのイメージです。 enter image description here

私は自分のニーズに合ったjQueryのチャートやGoogleのチャートを見つけようとしてきたが、これまでできませんでしたそうするために。階段状チャートなど、私が探しているものに近いものがいくつかありますが、それらはすべて「重複しない値」や「ゼロから始まる」といった要件を持っています。私もローソク足チャートを使用することを考えていましたが、実際にはデータセットにとって重要な重複領域を区別することはできません。

これは利用可能なものですか？間違った場所を探していますか？ご協力いただきありがとうございます。あなたは私が最後の数時間を行う方法を把握しようとしてきたものです天気系列データを視覚化に似た何かを、やりたいと思っているよう

出典

2012-06-11 Jim P

は思えます。

は、私は本当にあなたがGoogleのチャートを希望しているものを行う方法を知っていると言うことはできませんが、http://dygraphs.com/の図書館は本当におしゃれに見えます。ウェブサイトから

：

Stacked line graph.

出典

2012-06-24 22:11:07 aendrew

私はグラフのこれらのタイプのかなりのexpierenceを持っています。複雑な例については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>

私たちが上のコードで行ったことは、シリーズの数を複製しています。各シリーズには、前のシリーズとの距離が高さの透明なシリーズレイヤーが先行します。

簡略化された溶液のスクリーンショット： A screenshot of the simplified solution (code shown above)

錯体溶液のスクリーンショット： A screenshot of the complex solution implemented on my site allepeilingen.com

出典

2012-10-29 12:00:29 Ruut

積み重ねたエリアグラフの作成についてはどうすればよいですか？ [jQuery、Google Chartsなど]

答えて

関連する問題