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

Highcharts翻译系列之二十:曲线图例子(二)

2013-04-03

Highcharts翻译系列之二十:曲线图例子(二)代码[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html; charset...

Highcharts翻译系列之二十:曲线图例子(二)
代码

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高血压发生率曲线图</title>
<style type="text/css">
.hh
{
font-weight:lighter;
}
</style>
<script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
<script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: &#39;container&#39;,
type: &#39;spline&#39;,
plotBorderWidth: 0,
marginRight: 110,
style:
{
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;,
color: &#39;#262626&#39;
}
},
colors: [
&#39;#0476c5&#39;,
&#39;#fe7d7e&#39;
],
title: {
text: &#39;不同年龄段发病率曲线图&#39;,
style: {
fontWeight: &#39;bold&#39;,
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;,
color: &#39;#262626&#39;
}
},
subtitle: {
text: &#39;2012/1/1-2012/12/31&#39;,
style: {
color: &#39;#9e9494&#39;,
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;
}
},
xAxis: {
lineWidth: 1,
tickLength: 5,
tickColor: &#39;#272727&#39;,
tickmarkPlacement: &#39;on&#39;,
lineColor: &#39;#272727&#39;,
labels:
{
style: {
color: &#39;#262626&#39;,
fontSize: &#39;10px&#39;,
marginTop: 5
}

},
categories: [&#39;&le;45岁&#39;, &#39;46-55岁&#39;, &#39;56-65岁&#39;, &#39;&ge;66岁&#39;],
title: {
text: &#39;&#39;,
align: &#39;middle&#39;,
rotation: 0,
offset: 0,
style: {
color: &#39;#262626&#39;,
fontSize: &#39;12px&#39;,
fontWeight: &#39;normal&#39;,
display:&#39;none&#39;

}
}
},
yAxis: {
allowDecimals: false,
min: 0,
//max:100,
endOnTick: false,
gridLineWidth: 0,
lineWidth: 1,
lineColor: &#39;#272727&#39;,
tickWidth: 1,
tickColor: &#39;#272727&#39;,
tickPixelInterval: 30,
title: {
text: &#39;(发病率)&#39;,
align: &#39;high&#39;,
rotation: 0,
offset: 0,
y: -7,
style: {
color: &#39;#262626&#39;,
fontSize: &#39;11px&#39;,
fontWeight: &#39;normal&#39;
}
},
labels:
{
formatter: function () {
return this.value + &#39;%&#39;;
}

}
},
legend: {
enabled: true,
layout: &#39;vertical&#39;,
backgroundColor: null,
align: &#39;right&#39;,
borderWidth: 0,
verticalAlign: &#39;middle&#39;,
floating: true,
itemMarginBottom: 10,
symbolWidth: 36,
itemWidth: 60,
x:-10,
shadow: false,
style: {
color: &#39;#262626&#39;,
fontSize: &#39;11px&#39;,
fontWeight: &#39;normal&#39;
}
},
tooltip: {
formatter: function () {
return &#39;&#39; +
this.x + &#39;: &#39; + this.y + &#39; %&#39;;
}
},
plotOptions: {
spline: {
shadow: false

},

series:
{ lineWidth: 1,
dataLabels: {
color: &#39;#262626&#39;,
formatter: function () {
return this.y + &#39;%&#39;;
}

}
}
},
series: [{
name: &#39;男&#39;,

data: [76, 20, 10, 20],
dataLabels: {
enabled: true
}

}, {
name: &#39;女&#39;,

data: [86, 30, 20, 30],
dataLabels: {
enabled: true
}

}]
});
});

});
</script>
</head>
<body>
<div id="container" style="width: 740px; height: 360px; margin: 0 auto; border: 1px solid red">
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高血压发生率曲线图</title>
<style type="text/css">
.hh
{
font-weight:lighter;
}
</style>
<script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
<script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: &#39;container&#39;,
type: &#39;spline&#39;,
plotBorderWidth: 0,
marginRight: 110,
style:
{
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;,
color: &#39;#262626&#39;
}
},
colors: [
&#39;#0476c5&#39;,
&#39;#fe7d7e&#39;
],
title: {
text: &#39;不同年龄段发病率曲线图&#39;,
style: {
fontWeight: &#39;bold&#39;,
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;,
color: &#39;#262626&#39;
}
},
subtitle: {
text: &#39;2012/1/1-2012/12/31&#39;,
style: {
color: &#39;#9e9494&#39;,
fontFamily: &#39;Microsoft YaHei&#39;,
fontSize: &#39;12px&#39;
}
},
xAxis: {
lineWidth: 1,
tickLength: 5,
tickColor: &#39;#272727&#39;,
tickmarkPlacement: &#39;on&#39;,
lineColor: &#39;#272727&#39;,
labels:
{
style: {
color: &#39;#262626&#39;,
fontSize: &#39;10px&#39;,
marginTop: 5
}

},
categories: [&#39;&le;45岁&#39;, &#39;46-55岁&#39;, &#39;56-65岁&#39;, &#39;&ge;66岁&#39;],
title: {
text: &#39;&#39;,
align: &#39;middle&#39;,
rotation: 0,
offset: 0,
style: {
color: &#39;#262626&#39;,
fontSize: &#39;12px&#39;,
fontWeight: &#39;normal&#39;,
display:&#39;none&#39;

}
}
},
yAxis: {
allowDecimals: false,
min: 0,
//max:100,
endOnTick: false,
gridLineWidth: 0,
lineWidth: 1,
lineColor: &#39;#272727&#39;,
tickWidth: 1,
tickColor: &#39;#272727&#39;,
tickPixelInterval: 30,
title: {
text: &#39;(发病率)&#39;,
align: &#39;high&#39;,
rotation: 0,
offset: 0,
y: -7,
style: {
color: &#39;#262626&#39;,
fontSize: &#39;11px&#39;,
fontWeight: &#39;normal&#39;
}
},
labels:
{
formatter: function () {
return this.value + &#39;%&#39;;
}

}
},
legend: {
enabled: true,
layout: &#39;vertical&#39;,
backgroundColor: null,
align: &#39;right&#39;,
borderWidth: 0,
verticalAlign: &#39;middle&#39;,
floating: true,
itemMarginBottom: 10,
symbolWidth: 36,
itemWidth: 60,
x:-10,
shadow: false,
style: {
color: &#39;#262626&#39;,
fontSize: &#39;11px&#39;,
fontWeight: &#39;normal&#39;
}
},
tooltip: {
formatter: function () {
return &#39;&#39; +
this.x + &#39;: &#39; + this.y + &#39; %&#39;;
}
},
plotOptions: {
spline: {
shadow: false

},

series:
{ lineWidth: 1,
dataLabels: {
color: &#39;#262626&#39;,
formatter: function () {
return this.y + &#39;%&#39;;
}

}
}
},
series: [{
name: &#39;男&#39;,

data: [76, 20, 10, 20],
dataLabels: {
enabled: true
}

}, {
name: &#39;女&#39;,

data: [86, 30, 20, 30],
dataLabels: {
enabled: true
}

}]
});
});

});
</script>
</head>
<body>
<div id="container" style="width: 740px; height: 360px; margin: 0 auto; border: 1px solid red">
</div>
</body>
</html>

运行效果:

\

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