javascript - Highchart Area Range chart with gradient that follows the line - Stack Overflow

admin管理员组

文章数量:1307007

The following is an Area Range chart which has a gradient.

/

What I want to do is have the gradient follow the curve, so that the color at any point along the bottom line is the same, and it ends at the same color when it reaches the top line. I am pretty sure that this is not currently an option in highcharts, but I just wanted to see if anyone has run into this before. Here is the code that currently generates the gradient:

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

Thanks

Note: this is not the same as Gradient Fill on Line Chart (Highcharts) since I need the gradient to follow the curve

The following is an Area Range chart which has a gradient.

http://jsfiddle/gXpHH/1/

What I want to do is have the gradient follow the curve, so that the color at any point along the bottom line is the same, and it ends at the same color when it reaches the top line. I am pretty sure that this is not currently an option in highcharts, but I just wanted to see if anyone has run into this before. Here is the code that currently generates the gradient:

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

Thanks

Note: this is not the same as Gradient Fill on Line Chart (Highcharts) since I need the gradient to follow the curve

• javascript
• jquery
• highcharts

Share Improve this question Follow edited May 23, 2017 at 12:33 CommunityBot 111 silver badge asked Feb 8, 2013 at 20:56 Justin BicknellJustin Bicknell 4,8082020 silver badges2727 bronze badges 1

• how can we use three colors as gradient lets say (Green, Yellow, and Red) ? – Shihabudheen K M Commented Apr 8, 2020 at 7:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6 +50

The difficulty is the granularity: Highcharts draws one single SVG path for the series' points, and associates that one path with the gradient. If your series data is relatively linear however, the following approximation might be useful. See the jsfiddle that I've created:

Assuming that your series data is not static, my demo includes two series and a function that, for each series, attempts to dynamically create the linearGradient that es closest to your requirement:

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

Of course, this approach is not a full-blown solution and only useful if you're dealing with data that approximately follows a linear curve. Here's the jsfiddle

I don't have any example, nor do I know for sure if it is already in the specifications, but I am pretty sure the only way to acplish this effect would be using svg mash gradients.

You could use the path points as boundary points for the mash matrix and get the effect you want.

See here for further information.

本文标签： javascriptHighchart Area Range chart with gradient that follows the lineStack Overflow