[Highcharts使用说明.docVIP

Highcharts使用说明 概述 Highcharts是一个跨浏览器的JavaScript图表控件，支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能，只需要引入两个JS类库即可，一个是jquery类库，另外一个就是它本身的类库。但是如果需要支持主题和导出图表功能，就需要引入其它相应的JS类库。 官方网站网址：/ 参考手册网址：/ref/ 示例网址：/demo/ Highcharts使用 概述 第一步，引入js库。引入最少js库代码如下所示。 script type=text/javascript src=../js/jquery.min.js/script script type=text/javascript src=../js/highcharts.js/script 第二步，在页面中创建图表容器。示例代码如下所示。 div id=container style=min-width: 400px; height: 400px; margin: 0 auto/div 第三步，创建图表js对象。 图表构造参数常用属性 chart renderTo：图表的页面显示容器的ID defaultSeriesType：图表的显示类型（line,spline, scatter, splinearea bar, pie, area, column） margin：上下左右空隙 events：事件 click：function(e) {} load：function(e) {} 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：颜色 Tooltip：数据点的提示框 enabled：鼠标经过时是否可动态呈现true,false formatter：格式化提示框的内容样式 plotOptions：画各种图表的数据点的设置 Area类 lineWidth：线宽度 fillColor：area的填充颜色组 marker{}：设置动态属性 shadow：是否阴影 true,false states：设置状态 Line类 dataLabels：数据显示类 enabled：是否直接显示点的数据true,false series name：该条曲线名称 data[]：该条曲线的数据项 addPoint([x,y],redraw,cover) ：添加描点，redraw 是否重画，cover是否左移 setData: function(data, redraw) ：重新设置Data数组，redraw是否重画 remove: function(redraw) ：删除曲线 redraw: function()：重画曲线 marker enabled：是否显示描点 柱状图 图形效果 Js代码 script type=text/javascript var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: container, type: column }, title: { text: Monthly Average Rainfall }, subtitle: {