Home > Developer > JavaScript
Highcharts Official website: http://www.highcharts.com
Highcharts Official Website Example: http://www.highcharts.com/demo/
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.
here is a student performance trend Demo:
<! DOCTYPE html>
<html>
<head>
<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: {
//This mode, each point of the ToolTip separate display
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;
}
/**
This mode, the tooltip of the two points 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 year
//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, N), y:70, Name: ' Third exam for 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, All), 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: ' Chinese ',
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>
</head>
<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>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
