android highcharts柱状图实例,Highcharts教程(22) 柱状图例子

本节内容：Highcharts教程第二十二节的内容，柱状图的实例代码。

例子：

复制代码 代码示例:

Highcharts 柱状图-www.jquerycn.cn

$(function () {

var chart;

$(document).ready(function () {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'column',

margin: [35, 10, 40, 50],

plotBorderWidth: 1,

plotBorderColor: '#625f5f',

animation: false,

style:

{

fontFamily: 'Microsoft YaHei',

fontSize: '12px',

color: '#262626'

}

},

colors: [

'#7bd5f3',

'#fbe659',

"#fca108",

],

title: {

text: '柱状图',

x: 60,

y: 9,

style: {

// display: 'none',

fontFamily: 'Microsoft YaHei',

fontSize: '20px',

fontWeight: 'Bold',

color: '#262626'

}

},

subtitle: {

style: {

display: 'none'

}

},

xAxis: {

//lineWidth: 1,

// lineColor: '#625f5f',

labels:

{

style: {

color: '#262626',

fontSize: '12px',

marginTop: 5

}

},

categories: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质']

},

yAxis: {

allowDecimals: false,

min: 0,

max: 100,

alternateGridColor: '#f6f6f6',

// lineWidth: 1,

gridLineWidth: 1,

//tickPosition: 'inside',

gridLineColor: '#c5c5c5',

//offset: -3,

//  lineColor: '#625f5f',

plotLines: [{

value: 30,

color: '#439c07',

dashStyle: 'solid',

width: 2,

label: {

text: '倾向',

align: 'left',

x: -25,

style: {

color: '#439c07'

}

}

}, {

value: 40,

color: '#dd0202',

dashStyle: 'solid',

width: 2,

label: {

text: '判定',

align: 'left',

x: -25,

style: {

color: '#dd0202'

}

}

}],

title: {

text: '分数',

style: {

display: 'none'

}

},

labels: {

enabled: false

}

},

legend: {

layout: 'horizontal',

backgroundColor: '#FFFFFF',

align: 'right',

verticalAlign: 'top',

x: 0,

y: -10,

floating: true,

shadow: false,

enabled: false

},

tooltip: {

formatter: function () {

return '' +

this.x + ': ' + this.y + '分';

}

},

plotOptions: {

column: {

pointPadding: 0.001,

borderWidth: 0,

shadow: false,

animation: false

}

},

series: [{

name: '我的主要体质',

data: [{ y: 10, color: 'red', name: '5' }, { y: 23, color: '#7bd5f3', name: '5' }, { y:45, color: '#7bd5f3', name: '5' }, { y:

70, color: '#fbe659', name: '5' }, { y: 55, color: '#7bd5f3', name: '5' }, { y: 60, color: '#fca108', name: '5' }, { y: 32, color: '#7bd5f3',

name: '5' }, { y: 65, color: '#7bd5f3', name: '5' }, { y: 24, color: '#7bd5f3', name: '5'}],

dataLabels: {

enabled: true,

rotation: 0,

color: '#262626',

align: 'center',

x: -3,

y: 15,

formatter: function () {

if (this.y != 0) {

return this.y  + "分";

}

},

style: {

fontSize: '13px',

fontFamily: 'Microsoft YaHei'

}

}

}]

});

});

});

效果图，如下：