highcharts问题相关

最近一直在用highcharts做图形展现,经历了各种问题,从中也获取了一些经验,在这儿列出,方面以后查询。


1.要使用highcharts需要加入哪些资源

highcharts下载下来后的文件目录是这样的:

highcharts问题相关_第1张图片

只需要js这个文件夹就行了所以引入到jsp页面的内容是:

<script type="text/javascript" src="<%=path%>/resources/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path %>/resources/Highcharts-3.0.4/js/highcharts.js"></script>

其实看官方网站的demos就知道怎么引了:

highcharts问题相关_第2张图片

jquery.js和highcharts.js是必须的,而且jquery.js必须放在highcharts.js前面。官网上的js部分都是以$符开始的,所以,jquery.js是必须的,且要先引。

2.怎么去掉图片右下角的highcharts.com链接

highcharts问题相关_第3张图片

有两个方法:

一、换成低版本的highcharts,如Highcharts-3.0.4

二、在配置项中加一个配置:credits:{enabled:false}

其实credits有四个小项,enabled//是否可用;href//链接地址;position//显示位置;text//链接文字

知道这个的话,我们就可以写上自己的链接地址啦。

3.gauge图和的js和官网的一模一样,为什么图出不来

如果你是从官网上直接拷贝的js,那么有两个可能

一、没有引用highcharts-more.js

二、容器id没有对上,如官网上的是$('#container'),而你的jsp页面上没有id="container"的div。或者是有,但有多个id="container"的div

4.怎么在一个300*300的div中得到足够大的gauge(仪表图)

直接拷贝官网的js得到图如下

highcharts问题相关_第4张图片

接下来把标题设置为空字符串或null得到图如下

highcharts问题相关_第5张图片

是不是大了一点儿呢,接下来,我们把该仪表图的边距都设置为0(默认是有值的且都不是0)得到图如下

highcharts问题相关_第6张图片

是不是感觉仪表又大了点呢,接下来我们再设置一下它的背景,让它看样子是一个圆形,而不是一个方形。为了便观察,我们设置一下div的背景,然后再把仪表的背景设置为绿色(0,255,45),透明度设置为0(范围0-1),合起来就是rgb(0,255,45,0)。最后得到图如下

highcharts问题相关_第7张图片

这样下来,我们就得到了一个该div中最大的且几乎的div大小一致的仪表图啦,就像是一张圆形图片。pie(饼图)也可以得到类似的效果哦。



未完待续。。。

你可能感兴趣的:(Highcharts,图形)