代码信息

保存到分组
外部资源
$[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({
        accessibility: {
            keyboardNavigation: {
                skipNullPoints: true
            },
            pointDescriptionFormatter: function (point) {
                return point.category + ', low ' + point.low + ', median ' + point.median + ', high ' + point.high;
            },
            seriesDescriptionFormatter: function (series) {
                return series.name + ', series ' + (series.index + 1) + ' of ' + series.chart.series.length + ' with ' + series.points.length + ' data points.';
            }
        },
        chart: {
            type: 'boxplot',
            typeDescription: 'Low, median, high. Each data point has a low, median and high value, depicted vertically as small ticks.', // Describe the chart type to screen reader users, since this is not a traditional boxplot chart
            description: 'Chart depicting fictional fruit consumption data, with the minimum, maximum and median values for each month of 2015. Most plums were eaten in spring, and none at all in July or August. Bananas and apples were both consumed in smaller numbers and steadily throughout the year.'
        },
        title: {
            text: 'Daily company fruit consumption 2015'
        },
        xAxis: [{
            description: 'Months of the year',
            categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        }],
        yAxis: {
            title: {
                text: 'Fruits consumed'
            },
            min: 0
        },
        plotOptions: {
            series: {
                keys: ['low', 'median', 'high'],
                whiskerWidth: 5
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}:<br/>Low: <b>{point.low}</b><br/>Median: <b>{point.median}</b><br/>High: <b>{point.high}</b><br/>'
        },
        series: [{
            name: 'Plums',
            data: [
                [0, 8, 19],
                [1, 11, 23],
                [3, 16, 28],
                [2, 15, 28],
                [1, 15, 27],
                [0, 9, 21],
                null,
                null,
                [1, 6, 19],
                [2, 8, 21],
                [2, 9, 22],
                [1, 11, 19]
            ]
        }, {
            name: 'Bananas',
            data: [
                [0, 3, 6],
                [1, 2, 4],
                [0, 2, 5],
                [2, 2, 5],
                [1, 3, 6],
                [0, 1, 3],
                [1, 1, 2],
                [0, 1, 3],
                [1, 1, 3],
                [0, 2, 4],
                [1, 2, 5],
                [1, 3, 5]
            ]
        }, {
            name: 'Apples',
            data: [
                [1, 4, 6],
                [2, 4, 5],
                [1, 3, 6],
                [2, 3, 6],
                [1, 3, 4],
                [0, 2, 4],
                [0, 1, 2],
                [0, 1, 2],
                [0, 1, 2],
                [0, 2, 4],
                [1, 2, 4],
                [1, 3, 4]
            ]
        }]
    });
});

<div id="container"></div>
<script src="https://code.highcharts.com/mapdata/custom/nordic-countries.js"></script>
<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>

#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":2,"doctype":1,"description":"","meta":null,"newGroup":8,"group":{"id":8,"name":"demos","code":"demos"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

无障碍设计-柱形图 | JShare

模板（查看所有模板）

外部资源
$[libs.length]