Highcharts使用的一些总结
2024-08-24 15:01:47
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
// 错误时执行方法
});
最新文章
- mtk flash tool,Win7 On VirtualBox
- 1.Java网络编程之概述
- Git系列教程一 入门与简介
- [ACM_几何] F. 3D Triangles (三维三角行相交)
- STL_关联容器 VS C++ hashmap
- implement ";slam_karto"; package in Stage simulation
- dex
- Node.js学习 - Modules
- dpkg -P xx
- 老李推荐:第2章1节《MonkeyRunner源码剖析》了解你的测试对象: NotePad应用简介
- Java 浅析Thread.join()
- LOJ2396 JOISC2017 长途巴士 斜率优化
- 同源策略jsonp和cors
- eclipse汉化包
- Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(3)
- java.lang.IllegalStateException: Illegal access
- MySQL权限和用户安全
- 第8章 信号(1)_Linux信号处理机制
- [leetcode]403. Frog Jump青蛙过河
- [QT] 小知识集锦
热门文章
- ip代理池的爬虫编写、验证和维护
- HDU 3008 Warcraft
- Android 五大存储方式具体解释
- Linux下EPoll通信模型简析
- 英语影视台词---三、Cinema Paradiso
- 特性Attibute定义和使用
- RMQ算法 以及UVA 11235 Frequent Values(RMQ)
- 如何在Centos官网下载所需版本的Centos——靠谱的Centos下载教程
- Flex 最全的换行,制表符,回车,空格......特殊符号
- codeforces111D. Petya and Coloring(组合数学,计数问题)