编写静态的highcharts页面教程

来源：互联网发布：图片素材知乎编辑：程序博客网时间：2024/05/18 20:10

1. 编写highcharts相关的代码，一定要懂得到官方网站获取资源，官网地址如下：http://www.highcharts.com/

2. Highcharts是一个制作图表的纯Javascript类库，因此学习highcharts之前需要学习相关的js的基础知识，具体学习地址如下：http://www.w3cschool.cn/index-25.html

3. 在此次实践中我们还用到了jquery，jquery也是一个Javascript类库，简化了js编程，具体的学习地址如下：http://www.w3cschool.cn/index-30.html

基础地学习工作完成，我们就可以开始编写highcharts页面了，首先我们编写一个静态表格（表格中的参数静态写入js代码中）。

1. 编写对应的JSP文件：StaticHighcharts.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>StaticHighcharts DEMO</title>  <script src="js/jquery/jquery.js" type="text/javascript"></script>  <script src="js/Highcharts/js/highcharts.js" type="text/javascript"></script>  <script src="js/demo/statichighcharts.js" type="text/javascript"></script></head><body><div id="container" style="width: 400px; height: 400px"></div></body></html>

需要注意头文件中必须包含上面包含的两个库文件：highcharts.js 和statichighcharts.js，以及用户自己编写的statichighcharts.js文件

body部分，需要注意div的id

2. 根据官网上的案例，编写相应的js文件

var chart;$(document).ready(function() {   chart = new Highcharts.Chart({      chart: {         renderTo: 'container',         plotBackgroundColor: null,         plotBorderWidth: null,         plotShadow: false      },      title: {         text: 'Browser market shares at a specific website, 2010'      },      tooltip: {         formatter: function() {            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';         }      },      plotOptions: {         pie: {            allowPointSelect: true,            cursor: 'pointer',            dataLabels: {               enabled: true,               color: '#000000',               connectorColor: '#000000',               formatter: function() {                  return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';               }            }         }      },       series: [{         type: 'pie',         name: 'Browser share',         data: [            ['Firefox',   45.0],            ['IE',       26.8],            {               name: 'Chrome',                   y: 12.8,               sliced: true,               selected: true            },            ['Safari',    8.5],            ['Opera',     6.2],            ['Others',   0.7]         ]      }]   });});