5

グラフを作成する必要があるデータがいくつかあります。問題は、データに価格の範囲があることです。これらの価格の一部は、それらの間で重複しています。さらに、すべての価格帯には、ゼロ値ではない上限と下限があります。

これは、私が達成しようとしていることを説明するための画像です。 ここに画像の説明を入力

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

これは利用可能なものですか？間違った場所を見ているだけですか？よろしくお願いいたします。

4

2 に答える 2

7

私はこれらのタイプのグラフについてかなりの経験があります。複雑な例については、私のサイトを参照してください。単純化されたソリューションは、次のようにコーディングできます。

<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>

上記のコードで行うことは、シリーズの数を複製することです。各シリーズの前には、前のシリーズまでの距離の高さを持つ透明なシリーズ レイヤーが続きます。

簡略化されたソリューションのスクリーンショット: 単純化されたソリューションのスクリーンショット (上記のコード)

複雑なソリューションのスクリーンショット: 私のサイト allepeilingen.com に実装された複雑なソリューションのスクリーンショット

于 2012-10-29T12:00:29.283 に答える
0

気象系列データの視覚化に似たようなことをしたいようです。これは、過去数時間、私がその方法を理解しようとしてきたことです。

あなたが Google Charts で望んでいることを私が本当に知っているとは言えませんが、http: //dygraphs.com/ のライブラリは本当におしゃれに見えます。

ウェブサイトから：

積み上げ折れ線グラフ。

于 2012-06-24T22:11:07.803 に答える