86 lines
2.3 KiB
HTML
Executable File
86 lines
2.3 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Highcharts Example</title>
|
|
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
<style type="text/css">
|
|
${demo.css}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$('#container').highcharts({
|
|
chart: {
|
|
type: 'spline'
|
|
},
|
|
title: {
|
|
text: 'Monthly Average Temperature'
|
|
},
|
|
subtitle: {
|
|
text: 'Source: WorldClimate.com'
|
|
},
|
|
xAxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Temperature'
|
|
},
|
|
labels: {
|
|
formatter: function () {
|
|
return this.value + '°';
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
crosshairs: true,
|
|
shared: true
|
|
},
|
|
plotOptions: {
|
|
spline: {
|
|
marker: {
|
|
radius: 4,
|
|
lineColor: '#666666',
|
|
lineWidth: 1
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Tokyo',
|
|
marker: {
|
|
symbol: 'square'
|
|
},
|
|
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
|
|
y: 26.5,
|
|
marker: {
|
|
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
|
|
}
|
|
}, 23.3, 18.3, 13.9, 9.6]
|
|
|
|
}, {
|
|
name: 'London',
|
|
marker: {
|
|
symbol: 'diamond'
|
|
},
|
|
data: [{
|
|
y: 3.9,
|
|
marker: {
|
|
symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
|
|
}
|
|
}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
|
|
|
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
|
|
|
</body>
|
|
</html>
|