9

以下は、グラデーションのあるエリア レンジ チャートです。

http://jsfiddle.net/gXpHH/1/

私がやりたいのは、グラデーションを曲線に沿って配置することです。これにより、下の線に沿った任意の点の色が同じになり、上の線に到達すると同じ色で終了します。これは現在、ハイチャートのオプションではないと確信していますが、以前に誰かがこれに遭遇したかどうかを確認したかっただけです. 現在グラデーションを生成しているコードは次のとおりです。

series: [{
            name: "Shade",
            fillColor: {
                linearGradient: [0, 0, 0, 300],
                stops: [
                    [0, "#4572A7"],
                    [1, "rgba(2,0,0,0)"]
                ]
            },
            data: [
                [0, 14733, 18890],
                [1, 16583, 21642],
                //... rest here
                [10, 42417, 61955]
            ]
    }]

ありがとう

注：曲線をたどるにはグラデーションが必要なので、これは折れ線グラフ（ハイチャート）のグラデーション塗りつぶしと同じではありません

4

2 に答える 2

6

問題は粒度です。Highcharts は、シリーズのポイントに対して 1 つの SVG パスを描画し、その 1 つのパスをグラデーションに関連付けます。ただし、系列データが比較的線形である場合は、次の近似が役立つ場合があります。私が作成した jsfiddle を参照してください。

シリーズ データが静的でないと仮定すると、私のデモには 2 つのシリーズと、各シリーズについて要件に最も近い linearGradient を動的に作成しようとする関数が含まれています。

function getLinearGradient(series) {
    var lastY0=null, lastY1=null, maxY0=null, maxY1=null;
    $.each(series.data, function(key,value) {
        maxY0 = Math.max(value[1],maxY0);
        maxY1 = Math.max(value[2],maxY1);
        lastY0 = value[1];
        lastY1 = value[2];
    });
    var firstY0 = series.data[0][2],
        firstY1 = series.data[0][2]
    ;
    var minY0=maxY0, minY1=maxY1;
    $.each(series.data, function(key,value) {
        minY0 = Math.min(value[1],minY0);
        minY1 = Math.min(value[2],minY1);
    });
    var minY = minY0,
        maxY = maxY1,
        heightY = maxY - minY
    ;        
    var gradient = {
            x1: 10 + ( ((firstY0-minY) / heightY) * 80 ) + "%",
            y1: "10%",
            x2: 10 + ( ((lastY1-minY) / heightY) * 80 ) + "%",
            y2: "90%"
    };
    return gradient;
};

もちろん、このアプローチは本格的なソリューションではなく、ほぼ線形曲線に従うデータを扱う場合にのみ役立ちます。これがjsfiddleです

于 2013-02-14T14:29:32.033 に答える
2

例はありませんし、すでに仕様に含まれているかどうかもわかりませんが、この効果を達成する唯一の方法は svg マッシュ グラデーションを使用することだと確信しています。

パス ポイントをマッシュ マトリックスの境界ポイントとして使用して、必要な効果を得ることができます。

詳細については、こちらを参照してください。

于 2013-02-12T16:56:44.357 に答える