Highcharts

资料文档

https://www.runoob.com/highcharts/highcharts-setting-detail.html

https://www.highcharts.com.cn/docs/basic-chart

 

目录结构说明：

|-- examples           例子
|-- gfx                例子用到的图片资源
|-- graphics           例子用到的图片资源 
|-- code               所有 js 文件及源代码
    |-- css            Highcharts css 文件（只用于 CSS 版本 Highcharts） 
    |-- lib            相关的库文件
    |-- modules        功能模块文件目录
    |-- themes         主题文件目录
    |-- highcharts.js              highcharts 主文件
    |-- highcharts.src.js          highcharts 主文件源码
    |-- highcharts-3d.js           highcharts 3d 功能文件
    |-- highcharts-3d.src.js       highcharts 3d 功能文件源码
    |-- highcharts-more.js         highcharts 增加功能文件
    |-- highcharts-more.src.js     highcharts 增加功能文件源码
    |-- readme.txt                 源代码目录说明文件
|-- index.htm          例子入口文件 
|-- license.pdf        使用协议文档
|-- readme.txt         说明文件

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 Highcharts 图表</title>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!-- 引入 highcharts.js -->
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数      第一的参数是图表容器   图表配置
        var chart = Highcharts.chart('container', options);
    </script>
</body>
</html>

　　

功能模块

功能模块是在 Highcharts 主要功能的基础做的扩展，是由官方发布的功能包，常用功能模块有：

更多图表类型扩展模块（highcharts-more.js）
3D 图表模块 （highcharts-3d.js）
导出功能模块（modules/exporting.js）
金字塔图表类型（modules/funnel.js）
钻取功能模块（modules/drilldown.js）
数据加载功能模块（modules/data.js）
更多模块可以在下载的资源包的 modules 目录找到，具体的功能我们会在后面的教程中讲解。

使用功能模块很简单，只需要引入对应的文件即可，唯一需要注意的是保证 highcharts.js 的引用顺序是在功能模块之前。

例如启用导出功能时需要引入的文件及顺序是：
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>

　　

 

对象取值
在 JS 中可以通过逗号或中括号的形式取对象的值，另外可以通过 delete 删除对象属性，示例代码如下：

options.chart.type     // JS 对象取值
options.chart['type']  // 同上
delete options.chart.type // 删除属性

数组相关操作
JS 数组的创建可以用 new Array() 或更简单的 [] 来创建，其中 length 属性为数组的长度，push() 函数可以添加数组元素；join() 可以将数组转换成字符串，相应字符串可以通过的 split() 函数将其分隔成数组，下面用示例代码说明：

var series = [{
    name: '小明',
    data: []
}];

series.push({
    name: '小红',
    data: []
});

series[2].name;


var arr = [1, 2, 4, 10, 20];
var arrJoin = arr.join(); // 结果"1,2,4,10,20"，默认的分隔符是 ,
arrJoin.split(',');       // 将字符串按照 , 分隔，结果是 [1, 2, 4, 10, 20]

　

1、通过构造函数
var charts = Highcharts.chart('container', {
  // Highcharts 配置
});
2、或者通过 chart.renderTo 来指定
var charts = Highcharts.chart({
    // Highcharts 配置
    chart : {
        renderTo : 'container'  // 或 document.getElementById('container')
    }
}); 
3、如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用
$("#container").highcharts({
    // Highcharts 配置  
});

 

三、图表 --事件
click ：图表点击事件，效果见 在线演示
load ：图表加载完后事件，效果见 在线演示
addSeries ：图表增加序列事件，效果见 在线演示
drilldown ：图表下钻事件，效果见 在线演示
drillup ： 图表上钻事件，效果见 在线演示
redraw ：图表重绘事件，效果见 在线演示
selection ： 图表范围选择事件，效果见 在线演示
beforePrint ： 图表打印前事件，效果见 在线演示
afterPrint ： 图表打印后事件,效果见 在线演示

　　

  后续添加........

posted @ 2019-05-13 15:53  来阿里啊呀  阅读(234)  评论(0)    收藏  举报