highchars折线图---数据在圆点内--x轴文字竖版排列

效果如下图

<div id="container" style="width: 100%; height: 300px; margin-top: 5px;" data-highcharts-chart="0"></div>
var chart = $('#contaner').highcharts({
        chart: {
            defaultSeriesType: 'line'
        },
        title: {
            text: '',
            style: {
                fontSize: 16
            }
        },
        colors: [
            '#008CD9',
            '#FF4040'
        ],
        credits: {
            enabled: false // 禁用版权信息
        },
        xAxis: {
            tickWidth: 0,   //去掉刻度
            categories: ['TF技术职能型', 'GM综合管理型', 'AU自主独立型', 'SE安全稳定型', 'EC创业创新型', 'SV服务奉献型', 'CH纯粹挑战性', 'LS生活方式型'],
            labels: {
                overflow: false,
                y: 55,
                style: {
                    color: '#444444',
                    fontFamily: 'Verdana, sans-serif',
                    writingMode: 'tb-rl',    //文字竖排样式
                }
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            gridLineWidth: 0, //隐藏y轴刻度线
            title: {
                text: ''
            },
            labels: {
                enabled: false
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    // 开启数据标签
                    enabled: true,
                    align: 'center',
                    verticalAlign: 'middle',
                    crop: false,
                    overflow: 'none',
                    y: -2,
                    x: -1,
                    style: {
                        fontSize: '8px',
                        borderWidth: 'none',
                        color: '#fff',
                        textOutline: 'none',
                        // fontWeight: 'normal',
                    }
                },
                // 关闭鼠标跟踪,对应的提示框、点击事件会失效
                enableMouseTracking: false
            },
            series: {
                label: {
                    connectorAllowed: false,
                },
                marker: {
                    enabled: true, /*数据点是否显示*/
                    radius: 8, /*数据点大小px*/
                    symbol: 'circle' /*数据点样式*/
                },
                animation: false
            }
        },
        legend: {
            margin: -25,
            padding: 0
        },
        series: [{
            name: '参考值',
            data: [18, 36, 57, 0, 21, 37, 100, 69]
        }, {
            name: '本团队',
            data: [52, 85, 14, 41, 64, 10, 50, 41]
        }]
    });

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值