[转]推荐highcharts学习网址

highcharts学习网址1:http://www.hcharts.cn/docs/index.php?doc=basic(百度highcharts中文教程即可)

highcharts学习网址2:http://www.helloweba.com/view-blog-156.html(Highcharts选项配置详细说明文档)

顺便将网址2的内容分享过来:

Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全。这里,我把Highcharts常用的最核心的参数选项配置整理成文档,与大家分享。

Chart:图表区选项

Chart图表区选项用于设置图表区相关属性。

参数 描述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 null
defaultSeriesType 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter 0
width 图表宽度,默认根据图表容器自适应宽度 null
height 图表高度,默认根据图表容器自适应高度 null
margin 设置图表与其他元素之间的间距,数组,如[0,0,0,0] [null]
plotBackgroundColor 主图表区背景色,即X轴与Y轴围成的区域的背景色 null
plotBorderColor 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 null
plotBorderWidth 主图表区边框的宽度 0
shadow 是否设置阴影,需要设置背景色backgroundColor。 false
reflow 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小。 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x‘,‘y‘,‘xy‘ ‘‘
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数。  

Color:颜色选项

Color颜色选项用于设置图表的颜色方案。

参数 描述 默认值
color 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。 array

Highcharts已经默认提供了多种颜色方案,当要显示的图形多于颜色种类时,多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法:

Highcharts.setOptions({     colors: [‘#058DC7‘, ‘#50B432‘, ‘#ED561B‘, ‘#DDDF00‘, ‘#24CBE5‘, ‘#64E572‘, ‘#FF9655‘, ‘#FFF263‘, ‘#6AF9C4‘] }); 

Title:标题选项

Title标题选项用于设置图表的标题相关属性。

参数 描述 默认值
text 标题文本内容。 Chart title
align 水平对齐方式。 center
verticalAlign 垂直对齐方式。 top
margin 标题与副标题之间或者主图表区间的间距。 15
floating 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。 false
style 设置CSS样式。 {color: ‘#3E576F‘,
fontSize: ‘16px‘}

Subtitle:副标题选项

副标题提供的属性选项与标题title大致相同,可参照上述标题选项,值得一提的是副标题的text选项默认为‘‘,即空的,所以默认情况下副标题不显示。

xAxis:X轴选项

X轴选项用于设置图表X轴相关属性。

参数 描述 默认值
categories 设置X轴分类名称,数组,例如:categories: [‘Apples‘, ‘Bananas‘, ‘Oranges‘] []
title X轴名称,支持text、enabled、align、rotation、style等属性  
labels 设置X轴各分类名称的样式style,格式formatter,角度rotation等。 array
max X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。 null
min X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。 array
gridLineColor 网格(竖线)颜色 #C0C0C0
gridLineWidth 网格(竖线)宽度 1
lineColor 基线颜色 #C0D0E0
lineWidth 基线宽度 0

yAxis:Y轴选项

Y轴选项与上述xAxis选项基本一致,请参照上表中的参数设置,不再单独列出。

Series:数据列选项

数据列选项用于设置图表中要展示的数据相关的属性。

参数 描述 默认值
data 显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或
data: [{name: ‘Point 1‘,y: 0}, {name: ‘Point 2‘,y: 5}]
‘‘
name 显示数据列的名称。 ‘‘
type 数据列类型,支持 area, areaspline, bar, column, line, pie, scatter or spline line

plotOptions:数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型,其属性设置略微有些差异,现将常用选项列出来。

参数 描述 默认值
enabled 是否在数据点上直接显示数据 false
allowPointSelect 是否允许使用鼠标选中数据点 false
formatter 回调函数,格式化数据显示内容 formatter: function() {return this.y;}

Tooltip:数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

参数 描述 默认值
enabled 是否显示提示框 true
backgroundColor 设置提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框边框颜色,默认自动匹配数据列的颜色 auto
borderRadius 提示框圆角度 5
shadow 是否显示提示框阴影 true
style 设置提示框内容样式,如字体颜色等 color:‘#333‘
formatter 回调函数,用于格式化输出提示框的显示内容。返回的内容支持html标签如:<b>, <strong>, <i>, <em>, <br/>, <span> 2

Legend:图例选项

legend用于设置图例相关属性。

参数 描述 默认值
layout 显示形式,支持水平horizontal和垂直vertical horizontal
align 对齐方式。 center
backgroundColor 图例背景色。 null
borderColor 图例边框颜色。 #909090
borderRadius 图例边框角度 5
enabled 是否显示图例 true
floating 是否可以浮动,配合x,y属性。 false
shadow 是否显示阴影 false
style 设置图例内容样式 ‘‘

本文未列出来的选项设置请参照highcharts官网英文文档:http://www.highcharts.com/ref/

时间: 2024-08-24 06:51:33

[转]推荐highcharts学习网址的相关文章

网址推荐:学习数据结构的好去处

推荐一个学习数据结构的好网站:visualgo 生动形象,能够看到代码的运行效果和代码执行的过程. 网址推荐:学习数据结构的好去处

ROS学习网址【原创】

ROS学习网址 http://www.ros.org/ http://www.ros.org/news/book/ http://wiki.ros.org/ http://blog.exbot.net/archives/2966 http://blog.csdn.net/bobsweetie/article/details/43638761 http://blog.exbot.net/archives/category/ros

Scala学习网址

scala学习网址为:https://twitter.github.io/scala_school/zh_cn https://www.zhihu.com/question/26707124

10个值得推荐的学习编程的网站————博客园

/10个值得推荐的学习编程的网站 世界已经进入了互联网的时代.据最近发布的一篇<2016年互联网趋势>报告显示,中国已成为互联网市场的领导者,中国互联网用户的数量达到了6.68亿.可以预见,有着如此巨大的市场潜力,中国的互联网产业会迎来又一个井喷式的高峰.行业的迅猛发展也会相应地刺激行业人才的发展.据不完全统计,目前中国互联网从业人员的数量达到了5000多万人.从细分行业来看,互联网从业人员集中在移动互联网和电子商务这两大领域,岗位以技术类和运营类为主.其中,编程开发人员是技术类岗位的主力军,

前端学习网址——个人搜集(公开)

前端技术每年更新一次,技术难度和复杂度翻一倍!.................................前端网址:1.工具................................................XAMPP官网https://www.apachefriends.org/index.html Node.js中文网http://nodejs.cn/ BOOT框架中文网http://www.bootcss.com/ Express手册http://www.expressj

推荐一本学习Groovy的书籍Groovy程序设计!

有朋友公司在用groovy开发,于是推荐我学习一下,搜到了这本书: 花了一个月时间读完了这本书!写的很棒,几乎没有废话,全书都是很重要的知识点和很好的讲解,确实像封面说的那样,使用的好可以提高开发效率 唯一不足的可能是版本太旧了,而且java也在高速进步,12已经发布了,其实java并没有书里说的那么不堪,哈哈,java的lambda就很牛逼了, 虽然groovy的闭包更牛逼,想学习Groovy的童鞋,这本书一定要看,知识点很多! java知识分享网就可以下载高清pdf! 另外,这是我读书的时候

学习 JAVA,有什么书籍推荐?学习的方法和过程是怎样的?

原创:一只有梦想的鱼 原文链接:https://www.cnblogs.com/zhanlaoshi/p/10845765.html 本文内容比较长,主要包含下面几部分内容: 学习路线以及方法推荐 书单推荐 教程推荐 推荐一个学习中常看的仓库 学习/编程好习惯 面试必知 打开UC浏览器 查看更多精彩图片 学习路线以及方法推荐对于学习路线的话,我说一条我比较推荐的,我相信照着这条学习路线来你的学习效率会非常高.下面提到的书籍以及相关学习视频都答主已经整理好,文末有免费获取方式.很多朋友这几天领取了

推荐一些python Beautiful Soup学习网址

前言:这几天忙着写分析报告,实在没精力去研究django,虽然抽时间去看了几遍中文文档,还是等实际实践后写几篇操作文章吧! 正文:以下是本人前段时间学习bs4库找的一些网址,在学习的可以参考下,有点多,就不啰嗦了! 点击url左侧文字直接进入相关网页 点击url左侧文字直接进入相关网页 点击url左侧文字直接进入相关网页 BeautifulSoup使用总结:http://blog.chinaunix.net/uid-26722078-id-3519422.html Beautiful Soup

推荐一个程序员系统学习网址

今天给大家分享一个十分有用的学习网站!个人感觉对于入门者来说是十分适合的!并且内容权威!非常适合在校学生或者想要巩固基础的朋友来学习使用! 这里部分学习内容,可以看到内容非常的系统,是按照学习路线来的! 我们随便看一下前端开发学习路线: 可以看到前端开发学习路线分为了 5 大学习阶段,一共有 15 门免费课程.而且在我们学习完课程后还有对应的自测考试!重要的是全程免费 好了,具体的内容我就不再重复了,大家进入网址自己看就行了. 这里是用的前端举的例子,还有很多其他的学习路线也是一样的!非常的系统