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

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

2013-04-03

Highcharts翻译系列之十九:曲线图例子(1)代码:[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>重量曲线图</title> <script type="text/javascript" s...

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

代码:

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>重量曲线图</title>
<script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var splinechart;
$(document).ready(function () {
splinechart = new Highcharts.Chart({
chart: {
renderTo: &#39;splineContainer&#39;,
type: &#39;spline&#39;,
margin: [25, 30, 70, 50]
},
title: {
text: &#39;体重&#39;,
x: 50,
y: 10,
style: {
display: &#39;none&#39;
}
},
color: [
&#39;#006ebe&#39;
],
subtitle: {
style: {
display: &#39;none&#39;
}
},
xAxis: {
lineWidth: 1,
lineColor: &#39;#dfe7ef&#39;,
gridLineWidth: 0,
lineColor: &#39;#000000&#39;,
startOnTick: true,
tickPixelInterval: 110,
type: &#39;datetime&#39;,
labels: {
rotation: -45,
y: 40,
style: {
color: &#39;#000000&#39;,
fontSize: &#39;8px&#39;,
fontWeight: &#39;normal&#39;

}
},
tickColor: &#39;#000000&#39;,
tickLength: 5,
tickWidth: 1,
dateTimeLabelFormats: {
day: &#39;%Y-%m-%d&#39;,
week: &#39;%Y-%m-%d&#39;,
month: &#39;%Y-%m-%d&#39;,
year: &#39;%Y-%m-%d&#39;
},
title: {
style:
{
display: &#39;none&#39;
}
}

},
yAxis: {
allowDecimals: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1,
gridLineWidth:0,
gridLineColor: &#39;#d3d3d3&#39;,
lineColor: &#39;#000000&#39;,
tickColor: &#39;#000000&#39;,
tickLength: 5,
tickWidth: 1,
title: {
text: &#39;重量(kg)&#39;,
style: {
color: &#39;#02528b&#39;,
fontSize: &#39;12px&#39;,
fontWeight: &#39;normal&#39;

}
},
labels: {
style: {
color: &#39;#000000&#39;,
fontSize: &#39;10px&#39;,
fontWeight: &#39;normal&#39;
}
}
},
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,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
spline: {
shadow: false,
animation: false,
lineWidth: 1
},
series: {
color: &#39;#000000&#39;,
marker: {
enabled: true,
fillColor: &#39;#006ebe&#39;,
lineWidth: 1,
lineColor: &#39;#006ebe&#39;,
radius: 3
}
}
},
series: [{
name: &#39;重量&#39;,
data: [[Date.UTC(2012, 9, 8, 10, 22, 00), 88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9, 13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2], [Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10, 00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10, 00, 00), 86.4]],
dataLabels: {
enabled: true
}

}]

});
});

});
</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="bg" style="margin: 0; padding: 0;">
<div style="width: 736px; margin: 0 auto; height: 27px; line-height: 27px; font-family: Microsoft YaHei;
font-size: 14px">
<span style="color: #006ebd;">体重曲线图:</span><span style="font-size: 14px; color: #000000;">单位[kg]</span></div>
<div id="splineContainer" style="width: 736px; height: 310px; margin: 0 auto; padding-bottom: 10px;
border-bottom: 1px dashed #9b9b9b;">
</div>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>重量曲线图</title>
<script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
var splinechart;
$(document).ready(function () {
splinechart = new Highcharts.Chart({
chart: {
renderTo: &#39;splineContainer&#39;,
type: &#39;spline&#39;,
margin: [25, 30, 70, 50]
},
title: {
text: &#39;体重&#39;,
x: 50,
y: 10,
style: {
display: &#39;none&#39;
}
},
color: [
&#39;#006ebe&#39;
],
subtitle: {
style: {
display: &#39;none&#39;
}
},
xAxis: {
lineWidth: 1,
lineColor: &#39;#dfe7ef&#39;,
gridLineWidth: 0,
lineColor: &#39;#000000&#39;,
startOnTick: true,
tickPixelInterval: 110,
type: &#39;datetime&#39;,
labels: {
rotation: -45,
y: 40,
style: {
color: &#39;#000000&#39;,
fontSize: &#39;8px&#39;,
fontWeight: &#39;normal&#39;

}
},
tickColor: &#39;#000000&#39;,
tickLength: 5,
tickWidth: 1,
dateTimeLabelFormats: {
day: &#39;%Y-%m-%d&#39;,
week: &#39;%Y-%m-%d&#39;,
month: &#39;%Y-%m-%d&#39;,
year: &#39;%Y-%m-%d&#39;
},
title: {
style:
{
display: &#39;none&#39;
}
}

},
yAxis: {
allowDecimals: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1,
gridLineWidth:0,
gridLineColor: &#39;#d3d3d3&#39;,
lineColor: &#39;#000000&#39;,
tickColor: &#39;#000000&#39;,
tickLength: 5,
tickWidth: 1,
title: {
text: &#39;重量(kg)&#39;,
style: {
color: &#39;#02528b&#39;,
fontSize: &#39;12px&#39;,
fontWeight: &#39;normal&#39;

}
},
labels: {
style: {
color: &#39;#000000&#39;,
fontSize: &#39;10px&#39;,
fontWeight: &#39;normal&#39;
}
}
},
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,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
spline: {
shadow: false,
animation: false,
lineWidth: 1
},
series: {
color: &#39;#000000&#39;,
marker: {
enabled: true,
fillColor: &#39;#006ebe&#39;,
lineWidth: 1,
lineColor: &#39;#006ebe&#39;,
radius: 3
}
}
},
series: [{
name: &#39;重量&#39;,
data: [[Date.UTC(2012, 9, 8, 10, 22, 00), 88.8], [Date.UTC(2012, 9, 10, 10, 22, 00), 87.9], [Date.UTC(2012, 9, 13, 10, 00, 00), 87.4], [Date.UTC(2012, 9, 14, 12, 05), 87.2], [Date.UTC(2012, 9, 16, 10, 00, 00), 87.2], [Date.UTC(2012, 9, 18, 10, 00, 00), 86.8], [Date.UTC(2012, 9, 22, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 25, 10, 00, 00), 86.5], [Date.UTC(2012, 9, 30, 10, 00, 00), 86.4]],
dataLabels: {
enabled: true
}

}]

});
});

});
</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="bg" style="margin: 0; padding: 0;">
<div style="width: 736px; margin: 0 auto; height: 27px; line-height: 27px; font-family: Microsoft YaHei;
font-size: 14px">
<span style="color: #006ebd;">体重曲线图:</span><span style="font-size: 14px; color: #000000;">单位[kg]</span></div>
<div id="splineContainer" style="width: 736px; height: 310px; margin: 0 auto; padding-bottom: 10px;
border-bottom: 1px dashed #9b9b9b;">
</div>
</div>
</body>
</html>

运行效果:

\

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