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]
        }]
    });

猜你喜欢

转载自blog.csdn.net/jpjp2020/article/details/82223082
今日推荐