文档介绍:Highcharts 使用说明 1 概述 Highcharts 是一个跨浏览器的 JavaScript 图表控件,支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。H ighcharts 图表的基本功能, 只需要引入两个 JS类库即可,一个是 jquery 类库,另外一个就是它本身的类库。但是如果需要支持主题和导出图表功能,就需要引入其它相应的 JS 类库。官方网站网址: / 参考手册网址: / 示例网址: o/ 2H ighcharts 使用 概述第一步,引入 js 库。引入最少 js 库代码如下所示。< script type = "text/javascript" src = "../js/" ></ script > < script type = "text/javascript" src = "../js/" ></ script > 第二步,在页面中创建图表容器。示例代码如下所示。< div id = "container" style = "min-width: 400px; height: 400px; margin: 0 auto" ></ div > 第三步,创建图表 js 对象。 图表构造参数常用属性 1 chart renderTo :图表的页面显示容器的 ID defaultSeriesType :图表的显示类型( line,spline, scatter, splinearea bar, pie, area, column ) margin :上下左右空隙 events :事件 click : function(e) {} load : function(e) {} 2 xAxis/yAxis gridLineColor :网格颜色 reversed :是否反向 true ,false gridLineWidth :网格粗细 startOnTick :是否从坐标线开始画图区域 endOnTick :是否从坐标线结束画图区域 tickmarkPlacement :坐标值与坐标线标记的对齐方式 on,between tickPosition :坐标线标记的样式向内延伸还是向外延伸(insidel,outside) tickPixelInterval :决定着横坐标的密度 tickColor :坐标线标记的颜色 tickWidth :坐标线标记的宽度 lineColor :基线颜色 lineWidth :基线宽度 max :固定坐标最大值 min :固定坐标最小值 plotlines :标线属性 title enabled :是否显示 text :坐标名称 Labels :坐标轴值显示类 formatter :格式化函数 enabled :是否显示坐标轴的坐标值 rotation :倾斜角度 align :与坐标线的水平相对位置 x :水平偏移量 y :垂直偏移量 style font :字体样式 color :颜色 3 Tooltip :数据点的提示框 enabled :鼠标经过时是否可动态呈现 true,false formatter :格式化提示框的内容样式 4 plotOptions :画各种图表的数据点的设置 Area 类 lineWidth :线宽度 fillColor : area 的填充颜色组 marker{} :设置动态属性 shadow :是否阴影 true,false states :设置状态 Line 类 dataLabels :数据显示类 enabled :是否直接显示点的数据 true,false 5 series name :该条曲线名称 data[] :该条曲线的数据项 addPoint([x,y],redraw,cover) :添加描点, redraw 是否重画, cover 是否左移 setData: function(data, redraw) :重新设置 Data 数组, redraw 是否重画 remove: function(redraw) :删除曲线 5.