欢迎您访问郑州兴邦电子股份有限公司官方网站!
阿里巴巴诚信通企业
全国咨询热线:40000-63966
兴邦电子,中国水控机第一品牌

联系兴邦电子

全国咨询热线:40000-63966

售后:0371-55132951/55132952

工厂:河南省 郑州市 高新区莲花街电子电器产业园

Highcharts web图表工具

文章出处:http://www.singbon.com 作者:兴邦开发部 人气: 发表时间:2016年01月26日

[文章内容简介]:Highcharts是一种功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

Highcharts  web图表工具

Highcharts是一种功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库,配置使用也非常简单!

Highcharts 的运行需要两个 JS 文件, highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个。

引入 JS 文件可以是引入本地文件和在线文件,针对不同的 JS 框架需要引入的文件有所不同,我们可以

1 引入在线资源:jQuery 是目前使用最广泛的 JS 框架,无特殊说明,本教程所用的环境及所有例子都是基于 jQuery 的。<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 

2、Highcharts Standalone Framework

jQuery 目前用的最广泛,但是其体积过大(100K 以上),在移动端网络带宽有限的情况下,并不是最优选择,如果你的页面没有其他地方需要用到 jQuery,jQuery 仅仅用于 highcharts,这种情况可以考虑使用 Highcharts Standalone Framework ,Highcharts Standalone Framework 压缩后的大小只有 2k 哦。

<script src="http://cdn.hcharts.cn/highcharts/adapters/standalone-framework.js"></script>

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js" ></script>

3、高级功能

Highcharts 提供了图表导出、图表主题等其他额外功能,这些功能的实现,需要额外引入相关 JS 文件。

1、图表导出功能

导出功能是将图表导出下载为常见图片文件或 PDF 文档的功能,想要使用这个功能,额外引入 exporting.js 即可

<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js" type="text/javascript"></script> 

2、图表主题

Highcharts 提供图表更换主题功能,引入想应的主题 JS 文件即可改变图表样式。除默认主题样式外,Highcharts 官方提供多款主图,你也可以根据需要自己设计图表主题。

Highcharts 提供的主题文件放置在 /js/themes/ 目录下,给图表添加灰色(Gray)主题的代码是:

<script src="http://cdn.hcharts.cn/highcharts/themes/gray.js" type="text/javascript"></script> 

Highcharts 还有更多强大的功能。

本文关键词:web,图表,插件
回到顶部