首页 > 程序开发 > web前端 > JavaScript >

Highcharts翻译系列之二十二:柱状图例子

2013-04-03

Highcharts翻译系列之二十二:柱状图例子代码:[html]<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highcharts Example</title> <scri...

Highcharts翻译系列之二十二:柱状图例子
代码:

[html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highcharts Example</title>
<script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: &#39;container&#39;,
type: &#39;column&#39;,
margin: [35, 10, 40, 50],
plotBorderWidth: 1,
plotBorderColor: &#39;#625f5f&#39;,
animation: false,
style:
{
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;,
color: &#39;#262626&#39;
}
},
colors: [

&#39;#7bd5f3&#39;,
&#39;#fbe659&#39;,
"#fca108",

],
title: {
text: &#39;柱状图&#39;,
x: 60,
y: 9,
style: {
// display: &#39;none&#39;,
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;20px&#39;,
fontWeight: &#39;Bold&#39;,
color: &#39;#262626&#39;
}
},
subtitle: {
style: {
display: &#39;none&#39;
}
},
xAxis: {
//lineWidth: 1,
// lineColor: &#39;#625f5f&#39;,
labels:
{
style: {
color: &#39;#262626&#39;,
fontSize: &#39;12px&#39;,
marginTop: 5
}

},
categories: [&#39;平和质&#39;, &#39;气虚质&#39;, &#39;阳虚质&#39;, &#39;阴虚质&#39;, &#39;痰湿质&#39;, &#39;湿热质&#39;, &#39;血瘀质&#39;, &#39;气郁质&#39;, &#39;特禀质&#39;]
},
yAxis: {
allowDecimals: false,
min: 0,
max: 100,
alternateGridColor: &#39;#f6f6f6&#39;,

// lineWidth: 1,
gridLineWidth: 1,
//tickPosition: &#39;inside&#39;,
gridLineColor: &#39;#c5c5c5&#39;,
//offset: -3,
// lineColor: &#39;#625f5f&#39;,
plotLines: [{
value: 30,
color: &#39;#439c07&#39;,
dashStyle: &#39;solid&#39;,
width: 2,
label: {
text: &#39;倾向&#39;,
align: &#39;left&#39;,
x: -25,
style: {
color: &#39;#439c07&#39;
}
}
}, {
value: 40,
color: &#39;#dd0202&#39;,
dashStyle: &#39;solid&#39;,
width: 2,
label: {
text: &#39;判定&#39;,
align: &#39;left&#39;,
x: -25,
style: {
color: &#39;#dd0202&#39;
}
}
}],
title: {
text: &#39;分数&#39;,
style: {
display: &#39;none&#39;

}
},
labels: {
enabled: false
}
},
legend: {
layout: &#39;horizontal&#39;,
backgroundColor: &#39;#FFFFFF&#39;,
align: &#39;right&#39;,
verticalAlign: &#39;top&#39;,
x: 0,
y: -10,
floating: true,
shadow: false,
enabled: false
},
tooltip: {
formatter: function () {
return &#39;&#39; +
this.x + &#39;: &#39; + this.y + &#39;分&#39;;
}
},
plotOptions: {
column: {
pointPadding: 0.001,
borderWidth: 0,
shadow: false,
animation: false
}
},
series: [{
name: &#39;我的主要体质&#39;,

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

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

name: &#39;5&#39; }, { y: 65, color: &#39;#7bd5f3&#39;, name: &#39;5&#39; }, { y: 24, color: &#39;#7bd5f3&#39;, name: &#39;5&#39;}],
dataLabels: {
enabled: true,
rotation: 0,
color: &#39;#262626&#39;,
align: &#39;center&#39;,
x: -3,
y: 15,
formatter: function () {

if (this.y != 0) {
return this.y + "分";
}
},
style: {
fontSize: &#39;13px&#39;,
fontFamily: &#39;Microsoft YaHei&#39;

}
}

}]
});
});

});
</script>
</head>
<body>
<script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
<!-- <script src="../../js/modules/exporting.js"></script>-->
<div id="container" style="width: 800px; height: 475px; margin: 0 auto">
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highcharts Example</title>
<script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: &#39;container&#39;,
type: &#39;column&#39;,
margin: [35, 10, 40, 50],
plotBorderWidth: 1,
plotBorderColor: &#39;#625f5f&#39;,
animation: false,
style:
{
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;,
color: &#39;#262626&#39;
}
},
colors: [

&#39;#7bd5f3&#39;,
&#39;#fbe659&#39;,
"#fca108",

],
title: {
text: &#39;柱状图&#39;,
x: 60,
y: 9,
style: {
// display: &#39;none&#39;,
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;20px&#39;,
fontWeight: &#39;Bold&#39;,
color: &#39;#262626&#39;
}
},
subtitle: {
style: {
display: &#39;none&#39;
}
},
xAxis: {
//lineWidth: 1,
// lineColor: &#39;#625f5f&#39;,
labels:
{
style: {
color: &#39;#262626&#39;,
fontSize: &#39;12px&#39;,
marginTop: 5
}

},
categories: [&#39;平和质&#39;, &#39;气虚质&#39;, &#39;阳虚质&#39;, &#39;阴虚质&#39;, &#39;痰湿质&#39;, &#39;湿热质&#39;, &#39;血瘀质&#39;, &#39;气郁质&#39;, &#39;特禀质&#39;]
},
yAxis: {
allowDecimals: false,
min: 0,
max: 100,
alternateGridColor: &#39;#f6f6f6&#39;,

// lineWidth: 1,
gridLineWidth: 1,
//tickPosition: &#39;inside&#39;,
gridLineColor: &#39;#c5c5c5&#39;,
//offset: -3,
// lineColor: &#39;#625f5f&#39;,
plotLines: [{
value: 30,
color: &#39;#439c07&#39;,
dashStyle: &#39;solid&#39;,
width: 2,
label: {
text: &#39;倾向&#39;,
align: &#39;left&#39;,
x: -25,
style: {
color: &#39;#439c07&#39;
}
}
}, {
value: 40,
color: &#39;#dd0202&#39;,
dashStyle: &#39;solid&#39;,
width: 2,
label: {
text: &#39;判定&#39;,
align: &#39;left&#39;,
x: -25,
style: {
color: &#39;#dd0202&#39;
}
}
}],
title: {
text: &#39;分数&#39;,
style: {
display: &#39;none&#39;

}
},
labels: {
enabled: false
}
},
legend: {
layout: &#39;horizontal&#39;,
backgroundColor: &#39;#FFFFFF&#39;,
align: &#39;right&#39;,
verticalAlign: &#39;top&#39;,
x: 0,
y: -10,
floating: true,
shadow: false,
enabled: false
},
tooltip: {
formatter: function () {
return &#39;&#39; +
this.x + &#39;: &#39; + this.y + &#39;分&#39;;
}
},
plotOptions: {
column: {
pointPadding: 0.001,
borderWidth: 0,
shadow: false,
animation: false
}
},
series: [{
name: &#39;我的主要体质&#39;,

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

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

name: &#39;5&#39; }, { y: 65, color: &#39;#7bd5f3&#39;, name: &#39;5&#39; }, { y: 24, color: &#39;#7bd5f3&#39;, name: &#39;5&#39;}],
dataLabels: {
enabled: true,
rotation: 0,
color: &#39;#262626&#39;,
align: &#39;center&#39;,
x: -3,
y: 15,
formatter: function () {

if (this.y != 0) {
return this.y + "分";
}
},
style: {
fontSize: &#39;13px&#39;,
fontFamily: &#39;Microsoft YaHei&#39;

}
}

}]
});
});

});
</script>
</head>
<body>
<script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
<!-- <script src="../../js/modules/exporting.js"></script>-->
<div id="container" style="width: 800px; height: 475px; margin: 0 auto">
</div>
</body>
</html>

运行效果:

\

相关文章
最新文章
热点推荐