Highchart fillColor linear区域图中的渐变色

Highchart fillColor linearGradient in area chart

本文关键字:渐变 fillColor linear 区域 Highchart      更新时间:2023-09-26

我正在尝试Highchart区域。并且在Filcolor linearGradient中存在问题。当-如果设置yAxis min:0,那么它的工作是完美的。但如果将yAxis min设置为我的数据值的最小值,那么它完全显示一种红色,而不是像浅红色那样的其他层。这就是我为linerGradient 所做的

plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, '#ff0000'],
                        [1, '#f4f4f4']
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

Want but min:5898.87
等数据的最小值当前
谢谢
Javid

尝试这个

$(function () {
        $('#container').highcharts({
           chart: {
                zoomType: 'x',
                type:'area',
                plotBackgroundColor: '#fff',
                backgroundColor:'transparent',
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'chartTitle',
                align: 'left',
                margin: 30,
                style:{
                    fontFamily:'VegurRegular',
                    fontSize:'21px'
                }
            },
            subtitle: {
                text:'subTitle',
                align: 'left',
                x: 20,
                style: {
                    color: '#282828',
                    fontFamily:'VegurRegular'
                }
            },
            xAxis: {
                title: {
                    text: ''
                },
                type: 'datetime',
                labels : {
                    formatter: function() {
                        var myDate = new Date(this.value);
                        var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());   
                        return Highcharts.dateFormat('%b %e %y',newDateMs);      
                    },
                    style:{
                        fontFamily:'VegurRegular'
                    }
                 }
            },
            yAxis: {
                opposite:true,    
                title: {
                    text: ''
                },
                tickInterval: 200,
                min: 0,
                minRange: 0.1,
                labels: {
                    formatter: function() {
                        return [this.value];
                    },
                    style:{
                        fontFamily:'VegurRegular'
                    }
                },
            },
            tooltip: {
                shared: true,
                formatter: function() {
                    var xDate = new Date(this.x);

                    var day = daysArray[ xDate.getDay() ];
                    var month = monthsArray [ xDate.getMonth() ];
                    var date = xDate.getDate();
                    var year = xDate.getFullYear();
                    return day+', '+month+' '+date+', '+year+'<br/>' + '<span>'+ this.series.name +'</span>: <b>'+ $.number(this.y,2) +''+ispersign+'</b>';
                 },
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, '#ff0000'],
                            [1, '#f4f4f4']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },   
            series: [{
                type: 'area',
                name: 'USD to EUR',
                data:  [[1420070400000, 6656.37], [1420156800000, 6742.1], [1420243200000, 6716.63], [1420329600000, 6679.37], [1420416000000, 6742.84], [1420675200000, 6672.15], [1420761600000, 6529.47], [1420848000000, 6500.04], [1420934400000, 6461.7], [1421020800000, 6300.63], [1421280000000, 6182.72], [1421366400000, 6331.83], [1421452800000, 6336.48], [1421539200000, 6466], [1421625600000, 6545.27], [1421884800000, 6576.74], [1421971200000, 6598.18], [1422057600000, 6609.93], [1422489600000, 6633.51], [1422576000000, 6547], [1422662400000, 6566.09], [1422835200000, 6547.8], [1423094400000, 6417.16], [1423180800000, 6366.51], [1423267200000, 6419.83], [1423353600000, 6569.96], [1423440000000, 6501.14], [1423699200000, 6501.42], [1423785600000, 6542.2], [1423872000000, 6388.46], [1423958400000, 6498.78], [1424044800000, 6550.27], [1424304000000, 6585.53], [1424390400000, 6620.1], [1424476800000, 6728.04], [1424563200000, 6798.33], [1424649600000, 6832.83], [1424908800000, 6852.4], [1424995200000, 6811.61], [1425081600000, 6825.94], [1425168000000, 6810.6], [1425254400000, 6749.4], [1425254400000, 6782.55], [1425340800000, 6871.8], [1425427200000, 6860.02], [1425513600000, 6865.93], [1425600000000, 6853.44], [1425859200000, 6837.15], [1425945600000, 6829.12], [1426032000000, 6818.17], [1426118400000, 6828.11], [1426204800000, 6873.52], [1426464000000, 6857.05], [1426550400000, 6898.13], [1426636800000, 6898.08], [1426723200000, 6888.9], [1426809600000, 6915.2], [1427068800000, 6912.16], [1427155200000, 6949.63], [1427241600000, 6935.38], [1427328000000, 6949.73], [1427414400000, 6946.66], [1427932800000, 6940.64], [1428019200000, 6889.13], [1428105600000, 6919.24], [1428192000000, 6961.14], [1428278400000, 6911.8], [1428537600000, 6876.47], [1428624000000, 6702.84], [1428710400000, 6721.51], [1428796800000, 6761.07], [1428883200000, 6740.58], [1429142400000, 6804.08], [1429228800000, 6837.61], [1429315200000, 6945.2], [1429401600000, 6962.32], [1429488000000, 7022.51], [1429747200000, 7037.67], [1429833600000, 7019.68], [1429920000000, 6990.97], [1430006400000, 6895.33], [1430092800000, 6855.02], [1430352000000, 6891.43], [1430438400000, 6773.04], [1430438400000, 6809.5], [1430524800000, 6833.46], [1430956800000, 6961.77], [1431043200000, 6937.41], [1431129600000, 7015.36], [1431216000000, 7089.77], [1431475200000, 7064.3], [1431561600000, 7075.26], [1431648000000, 7096.78], [1431734400000, 7060.45], [1431820800000, 6994.63], [1432080000000, 7052.13], [1432166400000, 7062.93], [1432252800000, 7028.24], [1432339200000, 7053.67], [1432425600000, 7070.7], [1432684800000, 7103.98], [1432771200000, 7030.53], [1432857600000, 6946.28], [1432944000000, 6960.63], [1433116800000, 6985.95], [1433462400000, 6927.58], [1433548800000, 6933.74], [1433635200000, 6886.95], [1433721600000, 7046.82], [1433980800000, 7029.85], [1434067200000, 6933.8], [1434153600000, 6949.63], [1434240000000, 6973.04], [1434326400000, 6960.49], [1434585600000, 6968.87], [1434672000000, 6995.1], [1434758400000, 7007.26], [1434844800000, 7013.47], [1434931200000, 7031.72], [1435276800000, 6948.99], [1435363200000, 7033.33], [1435449600000, 7040.92], [1435536000000, 6984.43], [1435708800000, 6953.58], [1435795200000, 6928.27], [1435881600000, 6950.46], [1435968000000, 6859.24], [1436054400000, 6804.6], [1436313600000, 6790.04], [1436400000000, 6753.8], [1436486400000, 6830.27], [1436572800000, 6846.74], [1436659200000, 6784.92], [1436918400000, 6710.52], [1437004800000, 6710.1], [1437091200000, 6680.55], [1437177600000, 6707.88], [1437264000000, 6710.45], [1437523200000, 6825.67], [1437609600000, 6834.87], [1437696000000, 6844.8], [1437782400000, 6807.82], [1437868800000, 6753.7], [1438128000000, 6620.48], [1438214400000, 6520.98], [1438387200000, 6608.59], [1438473600000, 6630.47], [1438560000000, 6585.78], [1438819200000, 6535.68], [1438905600000, 6432.21], [1438992000000, 6490.7], [1439078400000, 6581.63], [1439164800000, 6673.38], [1439424000000, 6737.95], [1439510400000, 6753.75], [1439596800000, 6753.75], [1439683200000, 6796.45], [1439769600000, 6775.08], [1440028800000, 6788.69], [1440115200000, 6769.07], [1440201600000, 6667.34], [1440288000000, 6655.01], [1440374400000, 6579.81], [1440633600000, 6505.13], [1440720000000, 6555.28], [1440806400000, 6631], [1440892800000, 6668.87], [1440979200000, 6696.28], [1441238400000, 6688.62], [1441324800000, 6686.57], [1441411200000, 6752.41], [1441497600000, 6747.09], [1441584000000, 6718.49], [1441843200000, 6736.22], [1441929600000, 6664.54], [1442016000000, 6571.19], [1442102400000, 6568.33], [1442188800000, 6550.74], [1442448000000, 6550.3], [1442534400000, 6526.29], [1442620800000, 6403.45], [1442707200000, 6367.89], [1442793600000, 6187.65], [1443052800000, 5898.87], [1443139200000, 6081.34], [1443225600000, 5979.2], [1443312000000, 6192.03], [1443398400000, 6247.94], [1443657600000, 6058.54], [1443744000000, 6083.31], [1443830400000, 6194.1], [1443916800000, 6042.92], [1444176000000, 6074.52], [1444262400000, 6146.1], [1444348800000, 6229.01], [1444435200000, 6155.81], [1444521600000, 6117.76], [1444780800000, 6084.59], [1444867200000, 6137.6], [1444953600000, 6229.21], [1445040000000, 6186.99], [1445126400000, 6104.11], [1445385600000, 6108.71], [1445472000000, 5935.84], [1445558400000, 6032.24], [1445644800000, 5961.49], [1445731200000, 6109.01], [1445990400000, 5958.86], [1446076800000, 5909.24], [1446163200000, 6061.61], [1446336000000, 6072.47], [1446422400000, 6129.98], [1446681600000, 6298.92], [1446768000000, 6326.16], [1446854400000, 6336.35], [1446940800000, 6374.82], [1447027200000, 6416.16], [1447286400000, 6371.18], [1447372800000, 6342.28], [1447459200000, 6269.61], [1447545600000, 6338.67], [1447632000000, 6378.04], [1447891200000, 6352.33], [1447977600000, 6345.13], [1448064000000, 6348.42], [1448150400000, 6376.28], [1448928000000, 0]]
            }]
        });
    });