Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

经过多年的开发和维护拥有着丰富的图表功能和稳定的性能以及专业详细的开发文档上手极其容易，展现出来也是极其的美观简约大气，相比与echarts有完整的实例演示，功能介绍和详细的api文档。

网址：https://www.hcharts.cn/demo/highcharts
https://www.hcharts.cn/demo/highcharts/heatmap-canvas

五分钟上手代码



<!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.hcharts.cn/highcharts/highcharts.js"></script>

    <script>

        // 图表配置

        var options = {

            chart: {

                type: 'bar'                          //指定图表的类型，默认是折线图（line）

            },

            title: {

                text: '三分钟上手Highcharts 图表'                 // 标题

            },

            xAxis: {

                categories: ['薄荷糖', '牛奶糖', '巧克力豆']   // x 轴分类

            },

            yAxis: {

                title: {

                    text: '吃糖个数'                // y 轴标题

                }

            },

            series: [{ 

                // 数据列

                name: '王小婷',                        // 数据列名

                data: [1, 0, 7],                     // 数据

            }, {

                name: '安安',

                data: [2, 4, 3]

            }]

        };

        // 图表初始化函数

        var chart = Highcharts.chart('container', options);

    </script>

</body>

</html>

1：Highcharts柱状图宽度

如何修改Highcharts柱状图柱子的宽度：pointWidth:5 //柱子之间的距离值设置这个属性

series: [{

                    name: '温度',

                    data: [

                        [1, 2],

                        [2, 5],

                        [5, 9],

                    ],

                    pointWidth:5 //柱子之间的距离值

                }]

2：ajax数据交互示例代码

 $.ajax({

        url : "/bison/signIn/count/countOrgan",

        async : false,

        data : {

            beginDate : $("#beginTime").val(),

            endDate : $("#endTime").val(),

            personSex : $("#personSex").val(),

            organIds : getOrganIds(),

            signSetId : $("#signSet option:selected").val(),

        },

        type : 'POST',

        dataType : 'json',

        success : function(data) {

            // 成功时执行的回调方法

            category_data = data.returnData.response.categor;

            natural_data = data.returnData.response.normalList;

            late_data = data.returnData.response.lateList;

            absent_data = data.returnData.response.absentList;

            fun(category_data, natural_data, late_data, absent_data);

        },

        error : erryFunction

    // 错误时执行方法

    });

Highcharts使用的一些总结的更多相关文章

  1. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  2. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  3. Highcharts配置

    一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...

  4. highcharts .net导出服务 和 两种导出方式

    highcharts 的Net导出服务  GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...

  5. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

  6. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  7. highcharts

    preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...

  8. highcharts使用笔记

    1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...

  9. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  10. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

随机推荐

  1. luoguP1462通往奥格瑞玛的道路（二分答案+spfa）

    题意 给出n个点m条边的无向图. 每条边有两个权值a,b; 问在保证从1到n的路径a权值和小于x时,路径上b权值最大值最小为多少. (n≤10000,m≤50000,x≤1000000000) 题解 ...

  2. 洛谷—— P1926 小书童——刷题大军

    https://www.luogu.org/problem/show?pid=1926#sub 题目背景 数学是火,点亮物理的灯:物理是灯,照亮化学的路:化学是路,通向生物的坑:生物是坑,埋葬学理的人 ...

  3. Css 选择器总结

    选择器 .class 类对应的元素. #id 对应的id元素. * 全部元素 div{} 对应的标签 div,p{} 全部的div和p div p{} div下全部的p标签 div>p{} di ...

  4. windows開始菜单和任务栏图标显示空白而且点击时候显示项目已被移动或删除

    这几天实验室老常常自己主动断电.这是非常蛋疼的一件事,这不上次断电就出事了.来电后开机,点击任务栏上的程序全都显示为无法打开此项目,该项目已被移动.删除.原因是图标缓存丢失,可能是突然断电引起的,也有 ...

  5. uva 104 Arbitrage （DP + floyd）

    uva 104 Arbitrage Description Download as PDF Background The use of computers in the finance industr ...

  6. OPENCV(5) —— 图像直方图

    新版本对直方图不再使用之前的histogram的形式,而是用统一的Mat或者MatND的格式来存储直方图,可见新版本Mat数据结构的优势. C++: void calcHist(const Mat* ...

  7. windows 手动添加服务

    windows 手动添加服务方法一:修改注册表 在注册表编辑器,展开分支"HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services" ...

  8. Huawei设备配置系统时钟

    系统时钟是设备上的系统时间戳.由于地域的不同,用户可以根据当地规定设置系统时钟.用户必须正确设置系统时钟以确保其与其他设备保持同步.华为设备出厂时默认采用了协调世界时(UTC),但是没有配置时区所有在 ...

  9. 《三》build 快速创建模块

    一.将build.php文件复制一份放在 application目录下 二.修改build.php文件代码 <?php return [ 'home' => [ //需要生成的目录 '__ ...

  10. 51nod 编辑距离 + 滚动数组优化

    这道题一开始觉得增加和删除会移动字符串的位置很不好做 两个字符串dp状态一般是第一个前i个和第二个前j个 #include<cstdio> #include<algorithm> ...