Highcharts 官网
Highcharts 官网示例
Highcharts 官网文档
官网实例中给出了各式各样的demo可以参照document修改自己需要的即可
下面是一个学生成绩走势demo
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
<title>Highcharts Example</title>
<script type="text/javascript" src="
<script type="text/javascript">
$(function () {
$(#container)highcharts({
chart: {
type: spline
}
title: {
text: 初三第一学期
}
xAxis: {
type: datetime
labels: {
formatter: function() {
return HighchartsdateFormat(%Y%m%d thisvalue);
}
}
}
yAxis: {
title: {
text: 分数
}
min:
}
tooltip: {
//这种模式下每点的tooltip单独显示
shared: false
formatter: function() {
var s = <b>+ thispointname +</b>+<br/>+ HighchartsdateFormat("%Y/%m/%d" thispointx) +: +thispointy +分<br/>;
return s;
}
/**
这种模式下两个点的tooltip显示在一起
shared: true
formatter: function() {
var s=;
$each(thispoints function(i point) {
s += <b>+ pointkey +</b>+<br/>+ HighchartsdateFormat("%Y/%m/%d" pointx) +: +pointy +分<br/>;
});
return s;
}
*/
}
series: [{
name: 英语
// Define the data points All series have a dummy year
// of / in order to be compared on the same x axis Note
// that in JavaScript months start at for January for February etc
data: [
{x:DateUTC( ) y: name:高一第一学期第一次考试}
{x:DateUTC( ) y: name:高一第一学期第二次考试}
{x:DateUTC( ) y: name:高一第一学期第三次考试}
{x:DateUTC( ) y: name:高一第一学期第四次考试}
{x:DateUTC( ) y: name:高一第一学期第五次考试}
{x:DateUTC( ) y: name:高一第一学期第六次考试}
{x:DateUTC( ) y: name:高一第一学期第七次考试}
{x:DateUTC( ) y: name:高一第一学期第八次考试}
{x:DateUTC( ) y: name:高一第一学期第九次考试}
{x:DateUTC( ) y: name:高一第一学期第十次考试}
{x:DateUTC( ) y: name:高一第一学期第十一次考试}
{x:DateUTC( ) y: name:高一第一学期第十二次考试}
{x:DateUTC( ) y: name:高一第一学期第十三次考试}
{x:DateUTC( ) y: name:高一第一学期第十四次考试}
{x:DateUTC( ) y: name:高一第一学期第十五次考试}
{x:DateUTC( ) y: name:高一第一学期第十六次考试}
{x:DateUTC( ) y: name:高一第一学期第十七次考试}
{x:DateUTC( ) y: name:高一第一学期第十八次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
]
//type:column
} {
name: 数学
data: [
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
]
} {
name: 语文
data: [
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
{x:DateUTC( ) y: name:高一第一学期第次考试}
]
}]
});
});
</script>
</head>
<body>
<script src="//js/highchartsjs"></script>
<script src="//js/modules/exportingjs"></script>
<div id="container" style="maxwidth: px; height: px; margin: auto"></div>
</body>
</html>
