highcharts曲线区域图-改变区域图颜色

野性酷女 2022-08-13 15:58 242阅读 0赞

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'areaspline'
            },
            title: {
                text: 'Average fruit consumption during one week'
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF'
            },
            xAxis: {
                categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                ],
                plotBands: [{ // visualize the weekend
                    from: 4.5,
                    to: 6.5,
                    color: 'rgba(68, 170, 213, 0)'
                }]
            },
            yAxis: {
                title: {
                    text: 'Fruit units'
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: ' units'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                areaspline: {
                    color:'#rgba(255, 186, 0, 0.2)',
                    lineColor:'#ffba00',
                    fillOpacity: 0.2
                }
            },
            series: [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12],
                marker:{//线上数据点
    	            	radius:0,
    	            	lineWidth:0,
    	            	lineColor:'#fba845',
    	            	fillColor:'#fba845',
    	            	states:{
    	            		hover:{
    	            			enabled:false
    	            		}
    	            	}
    	            }
            }]
        });
    });

![Center][] ![Center 1][]

[Center]: https://img-blog.csdn.net/20141106141811632?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmlja3JvcHJhaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220810/c49dce30ea704e1a9b2594694da52ba0.png