首页 | 简单教程,简单编程

代码编辑器：

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>
var title = {
   text: '城市平均气温'   
};
var subtitle = {
   text: '来源: 简单教程 ( www.twle.cn )'
};
var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

var tooltip = {
   valueSuffix: '\xB0C'
}

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

var series =  [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
         26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
         24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
         16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

var options = {};

options.title = title;
options.subtitle = subtitle;
options.xAxis = xAxis;
options.yAxis = yAxis;
options.tooltip = tooltip;
options.legend = legend;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

代码编辑器：

运行结果：