highcharts带负值的双坐标柱状图

最新推荐文章于 2021-01-20 02:16:11 发布

ban小白

最新推荐文章于 2021-01-20 02:16:11 发布

阅读量641

点赞数

分类专栏：带负值的柱状图

本文链接：https://blog.csdn.net/qq_45334070/article/details/109099324

版权

带负值的柱状图专栏收录该内容

0 篇文章 0 订阅

订阅专栏

双坐标负值柱状图

想要的效果：
在这里插入图片描述
代码

       chart = Highcharts.chart('Funds_to_adjust', {
            chart: {
                type: 'bar',
                marginLeft:70,				//画板左右两侧边距
                marginRight:80			//画板左右两侧边距
            },
            credits: {
                enabled: false  // 禁用版权信息
            },
            title: {
                text: null
            },
            subtitle: {
                text: null
            },
            plotOptions: {
                column: {
                    pointPadding: 0.4,
                    borderWidth: 0,
                    pointWidth: 30
                }
            },
            xAxis: [{
                categories: [' '],
                title:{
                    text:null
                },
                crosshair: true,
                showEmpty:true
            }],
            yAxis: [{
                allowDecimals: false,
                tickWidth:1,
                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '项目数量',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    },
                    align:'high',								//和坐标轴的最大值对齐
                    y:20,
                    x:70
                },
                opposite: true										//和坐标轴的最大值对齐，可用的值有 "low"，"middle" 和 "high"
            }, {
                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                title: {
                    text: '预算金额',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    },
                    align:'high',								//和坐标轴的最大值对齐，可用的值有 "low"，"middle" 和 "high"
                    y:-20,
                    x:70
                }
            }],
            tooltip: {
                useHTML: true,
                formatter: function (data) {
                    if (this.series.name == "新增项目") {
                        return '<span>' + this.series.name + '</span><br/>' + '项目' +'<span><span>    </span><strong>'+ this.y + '</strong></span><span>    </span>'+ '预算' +'<span><span>    </span><strong>'+ this.series.chart.series[2].yData + '</strong></span>';
                    } else if (this.series.name == "取消项目") {
                        return '<span>' + this.series.name + '</span><br/>' + '项目' +'<span><span>    </span><strong>'+ (-(this.y)) + '</strong></span><span>    </span>' + '预算' +'<span><span>    </span><strong>'+ (-(this.series.chart.series[3].yData)) + '</strong></span>';
                    } else if (this.series.name == "调整项目（调增）") {
                        return '<span>' + this.series.name + '</span><br/>'  + '项目' +'<span><span>    <span><strong>'+ this.series.chart.series[0].yData + '</strong></span><span>    </span>' + '预算' +'<span><span>    </span><strong>'+ this.series.chart.series[2].yData + '</strong></span>';
                    } else if (this.series.name == "调整项目（调减）") {
                        return '<span>' + this.series.name + '</span><br/>' + '项目' +'<span><span>    <span><strong>'+(-(this.series.chart.series[1].yData)) + '</strong></span><span>    </span>' + '预算' +'<span><span>    </span><strong>'+(-(this.series.chart.series[3].yData)) + '</strong></span>';
                    }
                }
            },
            legend: {
                layout: 'horizontal',
                align: 'center',
                x: 0,
                y:-15,
                verticalAlign: 'top',
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{ 
            name: '新增项目',
            color: '#3367EF',
            data: [6],
            tooltip: {
                  valueSuffix: '个'
                  }
                  },
            {
            name: '取消项目',
            color: '#C1D1FA',
            data: [-6],
            tooltip: {
            			valueSuffix: '个'
            },},
            {
            name: '调整项目（调增）',
            yAxis: 1,
            color: '#05AD35',
            data: [1200],
            tooltip: {
            valueSuffix: '万'
            }},
            {
            name: '调整项目（调减）',
            yAxis: 1,
            color: '#B4E6C2',
            data: [-1200],
            tooltip: {
            valueSuffix: '万'
             }
            }]
        });

详细参数配置请参照官方文档：highcharts官方:https://api.highcharts.com.cn/highcharts