1

次の種類の視覚的表現を持つタイプを含める必要がある場合、複数のタイプを持つチャートを実現する最良の方法は何ですか?

| yellow   |blue|     gray      |  yellow |   gray   |

つまり、1 次元の型 (視覚的には高さがあります) で、色は「y」を示します (ここでは、黄色、青、灰色のカテゴリで構成されています)。

それらを積み重ねることもできるはずです：

| radical         | senseless |         high tension |
| yellow   |blue|     gray      |  yellow |   gray   |

これは、各カテゴリのシリーズを含むグラフ型の列を持つことで実現できます。

http://jsfiddle.net/RCnYV/

しかし、その上に別のチャート タイプを追加するにはどうすればよいですか。

yAxis (only for the line)
^                                                      ___
|-------            ___________________________   ____/
|       \__________/                           \/
|     radical         | senseless |         high tension |
|     yellow   |blue|     gray      |  yellow |   gray   |
-----------------------------------------------------------> xAxis (shared)

したがって、線シリーズは他のシリーズの上にある必要があります (ホバリングではありません)。xAxis はすべてのシリーズで共有されていることに注意してください。つまり、すべてのシリーズが正確に同じ数のデータ ポイントを持っています。シリーズのいくつかはタイプ「ライン」として提示され、他のシリーズは新しいタイプ（リボンの良い名前がわかりませんか？）で提示されているだけです。

また、同様のチャートを作成する他の方法はありますか? 上記の問題の 1 つは、カタログごとに 1 つのシリーズを作成する必要があることです。つまり、基本チャートの場合のように 2 つだけではなく、合計で 2 * シリーズです。

4

1 に答える 1

3

@ http://jsfiddle.net/jugal/cABfL/のようなものを探していますか? heightyAxis に s を指定し、それを操作しtopてチャートを積み重ねることができます。

        yAxis: [{
            top: 300,
            lineWidth: 2,
            offset: 0,
            height: 200,
            tooltip: {
                enabled: true,
                formatter: function() {
                    return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
                }
            }

            },
        {
            height: 200,
            lineWidth: 2,
            offset: 0,
            tooltip: {
                enabled: true,
                formatter: function() {
                    return this.value + 50;
                }
            }

            }],

同様のスタッキングの例は、@ http://www.highcharts.com/stock/demo/candlestick-and-volumeで入手できます。

EDIT
質問の 2 番目の部分に回答し(Also what other ways are there to create a similar chart?)ます。ハイチャートがそのような視覚化のためにテーブルにもたらすと思われるものは何もないので、この視覚化を得るには既存の行と列を自分で操作する必要があります.

これが私が行った方法です。リボンごとに積み上げ棒グラフ
を使用してみました。そのため、線に 1 つ、両方のリボンに 1 つ、合計 2 つのシリーズが必要になります。しかし、試してみると、棒グラフは回転した縦棒グラフ (少なくとも一種) にすぎないことがわかりました。縦軸が X で横軸が Y であるように見えるため、他のグラフが台無しになります。 、つまり、横軸を X にしたいので、折れ線グラフが台無しになります。

基本的に、棒グラフを使用しても、それほど遠くはありませんでした。折れ線グラフを使用して先に進みました（非常に太い線でlineWidth:50) リボンのセクションごとに 1 つのシリーズを使用して水平 (各ポイントの定数 Y) 折れ線グラフを描画し、各セクションに異なる色を与えることができます。各リボンには、前述のようにオフセットが異なる個別の Y 軸が必要です。また、すべてのツールチップ、Y 軸ラベル、およびグリッド線を削除して、折れ線グラフとは異なり、リボンのように見えるようにしました。ツールチップが必要な場合もありますが、折れ線グラフではポイントのツールチップが表示されます。この場合、2 つのポイント間のセクションにツールチップが必要なため、mouseOver イベント ハンドラを作成し、そこにセクションの長さを計算しました。ここで苦労したのは、リボンのセクションごとにシリーズを作成することだけだったので、先に進んで、値のリストを受け入れる次のユーティリティ関数を作成しました。

    // usage: createSeries([0, 3, 4, 6], 1)
    // Creates 4 series and assigns them all to yAxis 1
    // you can extend this to take colors etc too, as per requirement
    function createSeries(data, yAxisIndex) {
        var i;
        var series = [];
        for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
            var start = data[i];
            var end = data[i + 1];
            series.push({
                yAxis: yAxisIndex,
                animation: false,
                stack: 0,
                data: [[start, 0], [end, 0]],
                lineWidth: 50,
                marker: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: function() {
                        return "";
                    }
                },
                events: {
                    mouseOver: function() {
                        alert(this.data[1].x - this.data[0].x);
                    }
                },
                showInLegend: false

            });
        }
        return series;
    }

必要なのは、これらのシリーズを既存のシリーズにプッシュしてから、ハイチャート コンストラクターにフィードすることだけでした。

最終的な jsFiddle: http://jsfiddle.net/jugal/cABfL/

于 2012-08-29T13:24:34.690 に答える