用Highchats写的,比较简单的温度统计图,没有用Highchats插件、没写CSS。
代码:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script > $(function () { $('#container').highcharts({ chart: { type: 'spline' }, title: { text: '每月平均温度' }, subtitle: { text: '来源:互联网' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月月','八月' ,'九月','十月','十一月','十二月'] }, yAxis: { title: { text: '温度' }, labels: { formatter: function() { return this.value +'°' } } }, tooltip: { crosshairs: true, shared: true }, plotOptions: { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } }, series: [{ name: '伦敦', marker: { symbol: 'square' }, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] }, { name: '东京', marker: { symbol: 'diamond' }, data: [{ y: 3.9, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/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>