highcharts折线图设置负值边线颜色，节点颜色

最新推荐文章于 2023-05-22 00:36:46 发布

不忘初心丶

最新推荐文章于 2023-05-22 00:36:46 发布

阅读量2k

点赞数

分类专栏： highcharts 文章标签： highchars折线图折线图修改折线颜色

本文链接：https://blog.csdn.net/miracle__y/article/details/103705451

版权

highcharts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在最近项目中使用到highchars折线图，根据正负值区分折线颜色和点颜色，目前已解决该问题。

var chart = Highcharts.chart('monthlyincome', {
    chart: {
        type:'spline' // 平滑
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    yAxis: {
        title: {
            text: '就业人数'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    series: [{
        name: '月收益',
        data: [{y:-43934,marker:{fillColor:'#4a58f6'}}, 52503, 57177, {y:-69658,marker:{fillColor:'#4a58f6'}}, 97031, 119931, 137133, 154175], // 单个设置点颜色
        color: '#ff9853', // 改变线条颜色
        marker:{
            fillColor:'#ff4490' // 改变点颜色
        },
        negativeColor: '#4a58f6',//设置负值的颜色
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});

效果：