python棒棒糖图_棒棒糖图 | JShare

棒棒糖图 | JShare

Highcharts.chart('container', {

chart: {

type: 'lollipop'

},

accessibility: {

point: {

descriptionFormatter: function (point) {

var ix = point.index + 1,

x = point.name,

y = point.y;

return ix + '. ' + x + ', ' + y + '.';

}

}

},

legend: {

enabled: false

},

subtitle: {

text: '2018'

},

title: {

text: '世界十大人口国家'

},

tooltip: {

shared: true

},

xAxis: {

type: 'category'

},

yAxis: {

title: {

text: '人口'

}

},

series: [{

name: 'Population',

data: [{

name: 'China',

low: 1427647786

}, {

name: 'India',

low: 1352642280

}, {

name: 'United States',

low: 327096265

}, {

name: 'Indonesia',

low: 267670543

}, {

name: 'Pakistan',

low: 212228286

}, {

name: 'Brazil',

low: 209469323

}, {

name: 'Nigeria',

low: 195874683

}, {

name: 'Bangladesh',

low: 161376708

}, {

name: 'Russia',

low: 145734038

}, {

name: 'Mexico',

low: 126190788

}]

}]

});

棒棒糖图(Lollipop)是柱形图的变种，由圆形标点(marker)和连接到 x 轴的线组成。

.highcharts-figure, .highcharts-data-table table {

min-width: 320px;

max-width: 800px;

margin: 1em auto;

}

.highcharts-data-table table {

font-family: Verdana, sans-serif;

border-collapse: collapse;

border: 1px solid #EBEBEB;

margin: 10px auto;

text-align: center;

width: 100%;

max-width: 500px;

}

.highcharts-data-table caption {

padding: 1em 0;

font-size: 1.2em;

color: #555;

}

.highcharts-data-table th {

font-weight: 600;

padding: 0.5em;

}

.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {

padding: 0.5em;

}

.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {

background: #f8f8f8;

}

.highcharts-data-table tr:hover {

background: #f1f7ff;

}

.ld-label {

width:200px;

display: inline-block;

}

.ld-url-input {

width: 500px;

}

.ld-time-input {

width: 40px;

}

{"resource":null,"options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"URGrmw","name":"棒棒糖图","version":0,"doctype":0,"description":"","meta":"","newGroup":5,"group":{"id":5,"name":"Highcharts","code":"highcharts"}}}