Highcharts下载与使用_数据报表图

时间 2019-11-21

标签 highcharts 下载使用数据报表繁體版

原文原文链接

Highcharts简介

Highcharts:功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库javascript

Highcharts是一款纯javascript编写的图表库，可以很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不一样类型的图表，能够知足你对Web图表的任何需求！php

因为其功能强大、简单易用、开源免费等优势，Highcharts在国内外愈来愈受欢迎。下面详细说明Highcharts的优点java

Highcharts优点

兼容性

Highcharts支持目前全部的现代浏览器，包括IE6 +、iPhone/iPad、Android。Highcharts在标准（W3C标准）浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。jquery

开源免费

针对我的用户及非商业用途免费，并提供源代码下载，你能够任意的修改它。商业用途须要购买许可，我的及非商业用途须遵循CC BY-NC 3.0协议git

纯Javascript

Highcharts彻底基于本地浏览器技术，不须要任何插件（例如Flash、java），不须要安装任何服务器环境或动态语言库支持，只须要两个js文件便可运行。github

图表类型丰富

Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、偏差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中不少图表能够集成在同一个图形中造成综合图。json

动态性

提供丰富的API接口，方便在建立图表后对图表的任意点、线和文字等进行增长、删除和修改操做。支持众多的Javascript事件，结合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口，能够实时地从服务器取得数据并实时刷新图表。数组

多轴支持

对于须要比较的数据，Highcharts提供多轴支持。而且能够针对每一个轴设置其位置、文字和样式等属性。浏览器

动态提示框

当鼠标悬停在图表上的数据点时，Highcharts会显示信息提示框，固然，显示的内容和样式能够本身指定和设置。服务器

图表导出和打印功能

你能够将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。

图表缩放

能够设置图表的缩放，让你更方便查看图表数据。

支持外部数据加载

Highcharts支持多种数据形式，能够是Javascript数组、json文件、json对象和表格数据等，这些数据来源能够是本地、不一样页面，甚至是不一样网站。

Highcharts下载与使用

下载便可运行，看例子代码就能够入门

下载

中文网下载中心：http://www.hcharts.cn/product/download.php
官方下载：http://www.highcharts.com/download
Github 开源项目：https://github.com/highslide-software/highcharts.com
中文网开放CDN ： http://cdn.hcharts.cn
官方 CDN 服务： http://code.highcharts.com

解压下载获得的压缩包，进入相应的目录查看全部包含文件，Highcharts 提供的文件目录以下图所示：

目录结构说明：

|-- examples           例子目录
|-- exporting-server   导出服务器目录
|-- gfx                图片资源目录
|-- graphics           图片资源目录 
|-- js                 全部 js 文件源码代码（带 .src 的文件为未压缩版源代码）
|-- index.htm          例子入口文件

建议初学者从官方提供的例子代码入手，Highcharts 提供的丰富例子可让你轻松入门。

使用方法：只须要引用两个 JS 文件便可运行

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

1：只须要引入下面2个文件就行。其余矿展看说明。

<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：建立div容器

在页面的 body 部分建立一个div，并指定div 的 id，高度和宽度，代码以下

<div id="container" style="min-width:800px;height:400px"></div>

三、编写Highcharts代码

编写Highcharts必须的代码，用<script></script>包裹，代码能够放在页面的任意地方，一个最简单的图表实例代码以下

$(function () { 
    $('#container').highcharts({                   //图表展现容器，与div的id保持一致
        chart: {
            type: 'column'                         //指定图表的类型，默认是折线图（line）
        },
        title: {
            text: 'My first Highcharts chart'      //指定图表标题
        },
        xAxis: {
            categories: ['my', 'first', 'chart']   //指定x轴分组
        },
        yAxis: {
            title: {
                text: 'something'                  //指定y轴的标题
            }
        },
        series: [{                                 //指定数据列
            name: 'Jane',                          //数据列名
            data: [1, 0, 4]                        //数据
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

完成上述两个步骤后，保存文件并用浏览器打开，运行结果以下图所示

参考文档：

http://www.hcharts.cn/docs/index.php?doc=start-helloworld

2016年4月22号因为工做中用到了这个也曾在百度中需找这个功能，找了不少资料；为了帮助其余须要的人，写了这篇文档给那些须要的人！感谢您的支持

---赖忠标