代码信息

保存到分组
外部资源
$[libs.length]
暂无
- $[lib.showName]
添加新的资源

$[newLibMessage]

更多文件见开放CDN服务
快捷键
快捷键风格同 Sublime，同时支持 Emmet 特性，常用快捷键：

全局快捷键
- Ctrl + Enter：运行
- Ctrl + ←/→：折叠左侧菜单
- Ctrl + O：打开添加常用资源
- Ctrl + Z：撤销所有编辑器
- Ctrl + U：恢复所有编辑器
- F11：最大化运行结果
- ESC：关闭添加常用资源
编辑器快捷键
- Ctrl + Enter：运行
- Ctrl + /：注释代码
- Ctrl + H：格式化代码
- Ctrl + Z：撤销
- Ctrl + Y：恢复
- Tab：快捷生成代码
- Ctrl + L：选中当前行
- Ctrl + Q：折叠当前代码
- F11：最大化当前编辑器
关于

JShare 是一个在线代码测试、托管、分享的工具；

当前版本 $[base.version]，这里有更新日志；

使用前请查阅帮助文档及说明；

Copyright © 2020 JShare，由简数科技提供服务，浙ICP备16004892号-3

堆叠柱状图与折线图分类后折线图关联柱状图 | JShare

堆叠柱状图与折线图分类后折线图关联柱状图第一条折线图要对应到柱状图为one 中间第二条折线图要对应到柱状图two中间大神帮忙谢谢

var chart = new Highcharts.Chart('stat-compare-box-xms-chart', {
    // 图表初始化函数，其中 container 为图表的容器 div
    title: {
        text: '用户反馈质量报表'
    },
    credits: {
        enabled:false  //取消显示右下角官网地址
    },
    exporting: {
        enabled:false  //取消打印等
    },
    xAxis: {
        categories: ['最新版本-2', ' 最新版本-1', '最新版本'],
    },
    yAxis:[{
        labels: {
            format: '{value}%'
        },
        title: {
            text: '',
        },
        stackLabels: {
            enabled: true,
            formatter:function(){
                if(this.isNegative !== undefined){
                    return this.stack;
                }else{
                    return '';
                }
            },
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    }],
    legend: {
        labelFormatter:function(params){
            return this.name;
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                formatter:function(){
                    if(this.series.options.type != 'spline'){
                        return this.series.name+'<br>'+this.y+'%';
                    }else{
                        return '';
                    }
                }
            },
            cursor: 'pointer',
            point:{
                events:{
                    click:function(params){
                        alert(this.series.name);
                    }
                }
            }
        }
    },
    labels: {
        items: [{
            style: {
                left: '100px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    series: [
        {
            type: 'column',
            name: 'WifI',
            stack: 'one',
            data: [11, 9, 4]
        },
        {
            type: 'column',
            name: '内置应用',
            stack: 'one',
            data: [10, 4, 2]
        },
        {
            type: 'column',
            name: '系统设置',
            stack: 'one',
            data: [9, 5, 3]
        },
        {
            type: 'column',
            name: 'WifI',
            stack: 'two',
            data: [4, 7, 3]
        },
        {
            type: 'column',
            name: '内置应用',
            stack: 'two',
            data: [9, 2, 2]
        },
        {
            type: 'column',
            name: '系统设置',
            stack: 'two',
            data: [8, 3, 2]
        },
        {
            type: 'column',
            name: 'WifI',
            stack: 'three',
            data: [3, 8, 2]
        },
        {
            type: 'column',
            name: '内置应用',
            stack: 'three',
            data: [6, 4, 2]
        },
        {
            type: 'column',
            name: '系统设置',
            stack: 'three',
            data: [7, 4, 2]
        },
        {
            type: 'spline',
            name: '用户反馈',
            stack:'ont',
            data: [30, 18, 9],
            pointPlacement: -0.2,
            marker: {
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[1],
                fillColor: 'white'
            },
            dashStyle:'Dash',
        },
        {
            type: 'spline',
            name: '用户反馈',
            stack:'two',
            data: [21, 12, 7],
            marker: {
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[2],
                fillColor: 'white'
            },
            dashStyle:'Dash'
        },
        {
            type: 'spline',
            name: '用户反馈',
            stack:'three',
            data: [16, 16, 6],
            pointPlacement: 0.2,
            marker: {
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            },
            dashStyle:'Dash'
        }
    ]
});

<div id="stat-compare-box-xms-chart" style="min-width:600px;height:600px"></div>

{"resource":"1,3,7","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":0}}","code":{"code":"dIU3Wo","name":"堆叠柱状图与折线图分类后折线图关联柱状图","version":1,"doctype":0,"description":"堆叠柱状图与折线图分类后折线图关联柱状图   第一条折线图要对应到柱状图为one 中间   第二条折线图要对应到柱状图two中间   大神帮忙  谢谢","meta":"","newGroup":2260,"group":{"id":2260,"name":"临时分组","code":"temp"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

堆叠柱状图与折线图分类后折线图关联柱状图 | JShare

堆叠柱状图与折线图分类后折线图关联柱状图 第一条折线图要对应到柱状图为one 中间 第二条折线图要对应到柱状图two中间 大神帮忙 谢谢

模板（查看所有模板）

外部资源
$[libs.length]

堆叠柱状图与折线图分类后折线图关联柱状图第一条折线图要对应到柱状图为one 中间第二条折线图要对应到柱状图two中间大神帮忙谢谢