代码信息

保存到分组
外部资源
$[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

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            description: 'Most commonly used desktop screen readers in July 2015 as reported in the Webaim Survey. Shown as percentage of respondents. JAWS is by far the most used screen reader, with 30% of respondents using it. ZoomText and Window-Eyes follow, each with around 20% usage.'
        },
        title: {
            text: 'Desktop screen readers'
        },
        subtitle: {
            text: 'Click on point to visit official website'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    connectorColor: Highcharts.getOptions().colors[0],
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                point: {
                    events: {
                        click: function () {
                            window.location.href = this.website;
                        }
                    }
                },
                cursor: 'pointer'
            }
        },
        series: [{
            name: 'Percentage usage',
            borderColor: Highcharts.getOptions().colors[0],
            data: [{
                name: 'JAWS',
                y: 30.2,
                website: 'https://www.freedomscientific.com/Products/Blindness/JAWS',
                color: 'url(#highcharts-default-pattern-0)',
                description: 'This is the most used desktop screen reader'
            }, {
                name: 'ZoomText',
                y: 22.2,
                website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
                color: 'url(#highcharts-default-pattern-1)'
            }, {
                name: 'Window-Eyes',
                y: 20.7,
                website: 'http://www.gwmicro.com/window-eyes',
                color: 'url(#highcharts-default-pattern-2)'
            }, {
                name: 'NVDA',
                y: 14.6,
                website: 'https://www.nvaccess.org',
                color: 'url(#highcharts-default-pattern-4)'
            }, {
                name: 'VoiceOver',
                y: 7.6,
                website: 'http://www.apple.com/accessibility/osx/voiceover',
                color: 'url(#highcharts-default-pattern-3)'
            }, {
                name: 'System Access To Go',
                y: 1.5,
                website: 'https://www.satogo.com',
                color: 'url(#highcharts-default-pattern-7)'
            }, {
                name: 'ChromeVox',
                y: 0.3,
                website: 'http://www.chromevox.com',
                color: 'url(#highcharts-default-pattern-6)'
            }, {
                name: 'Other',
                y: 2.9,
                website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php',
                color: 'url(#highcharts-default-pattern-5)'
            }]
        }]
    });
});

<div id="container"></div>
<script src="http://cdn.hcharts.cn/libs/highcharts-export-csv/export-csv.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/accessibility.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}
caption {
    padding-bottom: 5px;
    font-family: 'Verdana';
    font-size: 14pt;
    font-weight: bold;
    color:#555555;
}
table {
    font-family: 'Verdana';
    font-size: 12pt;
    color:#555555;              
    border-collapse: collapse;
    border: 3px solid #CCCCCC;
    margin: 2px auto;	
}
tr {
    border-bottom: 2px solid #EEEEEE;
}
th {
    border-left: 2px solid #EEEEEE;
    border-right: 2px solid #EEEEEE;
    padding: 12px 15px;
    border-collapse: collapse;
}
th[scope="col"] {
    background-color: #ffffee;
}
th[scope="row"] {
    background-color: #f0fcff;
    text-align:left;
}
td {
    border-left: 2px solid #EEEEEE;
    border-right: 2px solid #EEEEEE;
    padding: 12px 15px;
    border-collapse: collapse;
}

{"resource":"1,3,5,7","options":null,"code":{"code":"VI5yLf","name":"无障碍设计-饼图例子","version":0,"doctype":1,"description":"","meta":null,"newGroup":8,"group":{"id":8,"name":"demos","code":"demos"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

无障碍设计-饼图例子 | JShare

模板（查看所有模板）

外部资源
$[libs.length]