Highcharts official website Document: Http://www.highcharts.com/documentation/how-to-use
Official website example gives a variety of demo, can refer to the document to modify their needs can be.
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>highcharts example</title>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
$ (function () {
$ (' #container '). Highcharts ({
Chart: {
Type: ' Spline '
},
Title: {
Text: ' First semester '
},
Xaxis: {
Type: ' DateTime ',
Labels: {
Formatter:function () {
Return Highcharts.dateformat ('%y-%m-%d ', this.value);
}
}
},
YAxis: {
Title: {
Text: ' Score '
},
min:0
},
ToolTip: {
In this mode, the tooltip of each point is displayed separately
Shared:false,
Formatter:function () {
var s = ' <b> ' + this.point.name + ' </b> ' + ' <br/> ' + highcharts.dateformat ("%y/%m/%d", This.point.x) + ': ' +this.point.y + ' min <br/> ';
return s;
}
/**
In this mode, the tooltip of the two dots are displayed together
Shared:true,
Formatter:function () {
var s= ';
$.each (this.points, function (i, point) {
s + + ' <b> ' + point.key + ' </b> ' + ' <br/> ' + highcharts.dateformat ("%y/%m/%d", Point.x) + ': ' +point.y + ' min <br/> ';
});
return s;
}
*/
},
Series: [{
Name: ' English ',
Define the data points. All series have a dummy
of 1970/71 in order to is compared on the same x axis. Note
That in JavaScript, months start at 0 for January, 1 for February etc.
Data: [
{x:date. UTC (1970, 9,), y:55, Name: ' First exam for first semester '},
{x:date. UTC (1970, a), y:60, Name: ' Second exam for first semester '},
{x:date. UTC (1970,), Y:70, Name: ' The third Test of the first semester '},
{x:date. UTC (1970, 2), y:80, Name: ' First semester fourth exam '},
{x:date. UTC (1970, 9), y:60, Name: ' First semester fifth exam '},
{x:date. UTC (1970, each), y:60, Name: ' First semester sixth exam '},
{x:date. UTC (1970, each), y:67, Name: ' First semester seventh exam '},
{x:date. UTC (1971, 0, 1), y:81, Name: ' First semester eighth exam '},
{x:date. UTC (1971, 0, 8), y:78, Name: ' First semester nineth exam '},
{x:date. UTC (1971, 0,), y:98, Name: ' First semester tenth exam '},
{x:date. UTC (1971, 0,), y:84, Name: ' First semester 11th exam '},
{x:date. UTC (1971, 1,), y:80, Name: ' First semester 12th exam '},
{x:date. UTC (1971, 1,), y:80, Name: ' First semester 13th exam '},
{x:date. UTC (1971, 1,), y:92, Name: ' First semester 14th exam '},
{x:date. UTC (1971, 2, 4), y:49, Name: ' First semester 15th exam '},
{x:date. UTC (1971, 2, one), y:79, Name: ' First semester 16th exam '},
{x:date. UTC (1971, 2,), y:73, Name: ' First semester 17th exam '},
{x:date. UTC (1971, 2,), y:61, Name: ' First semester 18th exam '},
{x:date. UTC (1971, 3, 2), y:76, Name: ' First semester 19th exam '},
{x:date. UTC (1971, 3, 6), y:82, Name: ' First semester 20th exam '},
{x:date. UTC (1971, 3, y:84, Name: ' First semester 21st exam '},
{x:date. UTC (1971, 4, 3), Y:10, Name: ' First semester 22nd exam '},
{x:date. UTC (1971, 4,), y:19, Name: ' First semester 23rd exam '},
{x:date. UTC (1971, 5, 9), y:25, Name: ' First semester 24th exam '},
{x:date. UTC (1971, 5,), y:55, Name: ' First semester 25th exam '}
]
, type: ' column '
}, {
Name: ' Math ',
Data: [
{' x ':D ate. UTC (1970, 9,), ' Y ':, ' name ': ' First semester 1th exam '},
{x:date. UTC (1970, 9,), y:29, Name: ' First semester 2nd exam '},
{x:date. UTC (1970, 1), y:47, Name: ' First semester 3rd exam '},
{x:date. UTC (1970, one, one), y:55, Name: ' First semester 4th exam '},
{x:date. UTC (1970, each), y:38, Name: ' First semester 5th exam '},
{x:date. UTC (1971, 0, 8), y:38, Name: ' First semester 6th exam '},
{x:date. UTC (1971, 0,), y:38, Name: ' First semester 7th exam '},
{x:date. UTC (1971, 1, 1), y:38, Name: ' First semester 8th exam '},
{x:date. UTC (1971, 1, 8), y:48, Name: ' First semester 9th exam '},
{x:date. UTC (1971, 1,), y:58, Name: ' First semester 10th exam '},
{x:date. UTC (1971, 2,), y:89, Name: ' First semester 11th exam '},
{x:date. UTC (1971, 2,), y:70, Name: ' First semester 12th exam '},
{x:date. UTC (1971, 3, 4), y:94, Name: ' First semester 13th exam '},
{x:date. UTC (1971, 3, 9), y:91, Name: ' First semester 14th exam '},
{x:date. UTC (1971, 3, y:75, Name: ' First semester 15th exam '},
{x:date. UTC (1971, 3,), y:66, Name: ' First semester 16th exam '},
{x:date. UTC (1971, 4,), y:65, Name: ' First semester 17th exam '},
{x:date. UTC (1971, 4,), y:35, Name: ' First semester 18th exam '},
{x:date. UTC (1971, 5, 7), y:56, Name: ' First semester 19th exam '}
]
}, {
Name: ' Language ',
Data: [
{x:date. UTC (1970, 9, 9), y:0, Name: ' First semester 1th exam '},
{x:date. UTC (1970, 9,), y:15, Name: ' First semester 2nd exam '},
{x:date. UTC (1970,), Y:35, Name: ' First semester 3rd exam '},
{x:date. UTC (1970, one,), y:46, Name: ' First semester 4th exam '},
{x:date. UTC (1971, 0, 1), y:59, Name: ' First semester 5th exam '},
{x:date. UTC (1971, 0,), y:58, Name: ' First semester 6th exam '},
{x:date. UTC (1971, 1, 1), y:62, Name: ' First semester 7th exam '},
{x:date. UTC (1971, 1, 7), y:65, Name: ' First semester 8th exam '},
{x:date. UTC (1971, 1,), y:77, Name: ' First semester 9th exam '},
{x:date. UTC (1971, 2, 8), y:77, Name: ' First semester 10th exam '},
{x:date. UTC (1971, 2,), y:79, Name: ' First semester 11th exam '},
{x:date. UTC (1971, 2,), y:86, Name: ' First semester 12th exam '},
{x:date. UTC (1971, 3, 4), y:80, Name: ' First semester 13th exam '},
{x:date. UTC (1971, 3,), y:94, Name: ' First semester 14th exam '},
{x:date. UTC (1971, 3,), y:98, Name: ' First semester 15th exam '},
{x:date. UTC (1971, 4,), y:39, Name: ' First semester 16th exam '},
{x:date. UTC (1971, 4,), y:0, Name: ' First semester 18th exam '},
]
}]
});
});
</script>
<body>
<script src= ". /.. /js/highcharts.js "></script>
<script src= ". /.. /js/modules/exporting.js "></script>
<div id= "Container" style= "max-width:800px; height:400px; margin:0 Auto "></div>
</body>
