Highcharts环境配置、配置语法

来源:互联网 发布:网络摄像头如何安装 编辑:程序博客网 时间:2024/06/05 04:22

关于Highcharts转载是:http://www.runoob.com/highcharts/highcharts-tutorial.html

HighCharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库。Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。

HighCharts 特性

  • 兼容性 - 支持所有主流浏览器和移动平台(android、iOS等)。
  • 多设备 - 支持多种设备,如手持设备 iPhone/iPad、平板等。
  • 免费使用 - 开源免费。
  • 轻量 - highcharts.js 内核库大小只有 35KB 左右。
  • 配置简单 - 使用 json 格式配置
  • 动态 - 可以在图表生成后修改。
  • 多维 - 支持多维图表
  • 配置提示工具 - 鼠标移动到图表的某一点上有提示信息。
  • 时间轴 - 可以精确到毫秒。
  • 导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式
  • 输出 - 网页输出图表。
  • 可变焦 - 选中图表部分放大,近距离观察图表;
  • 外部数据 - 从服务器载入动态数据。
  • 文字旋转 - 支持在任意方向的标签旋转。

支持的图表类型

HighCharts支持的图表类型:

序号图表类型1曲线图2区域图3饼图4散点图5气泡图6动态图表7组合图表83D 图9测量图10热点图11树状图(Treemap)

Highcharts 环境配置

Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery 库。关于jQuery在之前讲过,再次不做赘述。

安装 jQuery

jQuery 安装可以使用以下两种方式:

  • 1、访问 jquery.com 下载jQuery包。
  • 2、使用本站静态资源库的jQuery资源:

    http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js
  • 3、使用百度静态资源库的jQuery资源:

    http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

使用下载的方式

使用下载的方式,在 HTML 页面引入 jQuery 代码:

<head>   <script src="/jquery/jquery.min.js"></script></head>

使用 CDN(推荐)

使用本站静态资源库来加载jQuery库:

<head>   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script></head>

安装 Highcharts

Highcharts 安装可以使用以下两种方式:

  • 1、访问 highcharts.com 下载 Highcharts 包。
  • 2、使用官方提供的 CDN 地址:http://code.highcharts.com/highcharts.js

使用下载的方式(推荐)

使用下载的方式,在 HTML 页面引入 Highcharts 代码:

<head>   <script src="/highcharts/highcharts.js"></script></head>

使用 CDN

使用官方提供的 CDN 地址:

<head>   <script src="http://code.highcharts.com/highcharts.js"></script></head>


0 0
原创粉丝点击