由于项目需要,学习并使用了Highcharts图表插件,这是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库插件。
Highcharts简介
下边的介绍来自Highcharts中文网
Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !
Highcharts优势:兼容性好,开源,纯js,图表丰富,动态,多轴,能够导出和打印,支持缩放和加载外部数据。
另外,Highcharts 的运行需要两个 JS 文件, highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个。
目前Highcharts也有了中文网站,网址:http://www.hcharts.cn/ 方便大家学习使用,但是该网站的的API部分的汉化还在完善中,可以在这里学习和下载。在此感谢他们的无私奉献。
Highcharts API
虽然中文网站的汉化还未完全,但是看API的话还是推荐去Highcharts中文网,有详尽的解释和实例
API地址:
http://www.hcharts.cn/api/index.php
顺便一说他的搜索功能确实很好用=w=
项目实例
Highcharts中有多种图表,在使用中各个图表之间的差异不大,在这里我单独拿出一个比较有代表性的图表作为实例,并且会做详尽的注释,配合API阅读,应该能快速入门。
同时,我在两个饼图之间设置的联动,默认显示左边供应商的分布,当点击该饼图的一部分时,右边加载该供应商下所有工厂的分布图。
例子例子:
//Supplier1_factory begin //右边的被联动的图表,显示每个供应商的工厂
var SupChartMain = new Highcharts.Chart({
chart:{
renderTo:"sup1", //图表插入id为他的div
type:"pie", //类型是饼图
height:298,
width:520,
margin:0,
plotBackgroundColor:null,//背景色
plotBor