Hichcharts让3D柱形图竖直显示

如下图所示:

重点在这里options3d,alpha:内旋转角度 ,beta:外旋转角度,这两个的值要设置的比较小一点。让3D柱形图直立起来的关键参数是depth,图表的合计深度,默认为100,让depth的值变大一些,例如200,就可以让3D柱形图直立起来
           

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'residentIDColumn',
            type: 'column',
            backgroundColor: 'transparent',
            //重点在这里,alpha和beta要设置的比较小一点,让3D柱形图直立起来的关键参数是depth,图表的合计深度,默认为100,让depth的值变大一些,就可以让3D柱形图直立起来
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 0,
                depth: 200,
                viewDistance: 25
            }
        },
        title: false,
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '{series.name}: {point.y}'
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: community,
            //crosshair: true,
            lineWidth: 10,
            gridLineWidth: 0,
            labels: {
                formatter: function () {
                    return this.value
                },
                style: {
                    color: '#fff',
                    fontSize: '18px',
                    fontFamily: '宋体'
                }
            }
        },
        yAxis: {
            allowDecimals: false,
            title: false,
            min: 0,
            gridLineWidth: 0,
            lineWidth: 0,
            tickLength: 0,
            labels: {
                enabled: false
            }//去掉刻度数字
        },
        plotOptions: {
            series: {
                color: "red",
                dataLabels: {
                    enabled: true
                }
            },
            column: {
                depth: 25,
                dataLabels: {
                    enabled: true, //数据显示在柱顶
                    defer: false,
                    color: 'white'
                }
            }
        },
        series: [{
            name: '',
            data: communityNum
        }]
    });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值