Highcharts 前端图表插件
Highcharts 支持将图片下载成各种格式
<div id="container" style="min-width:400px;height:400px"></div>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
$(function () {
Highcharts.setOptions({
credits:{
enabled:false
}
});
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: '月会员注册展示'
},
subtitle: {
text: '单位(位)'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true // 开启数据标签
},
enableMouseTracking: false // 关闭鼠标跟踪,对应的提示框、点击事件会失效
}
},
series: [
{
name: '东京',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25,26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: '伦敦',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
]
});
});
</script>
效果图:
Highcharts 前端图表插件的更多相关文章
- Web前端图表绘制JQuery插件jqplot
在此之前使用了Chart.js.Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot. 1.Chart Chart中文官网:http://chartjs.cn/ 1.1优 ...
- 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示
在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...
- HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 利用MVC Chart 打造后台图表、前端图表
应用场景是这个样子的:要做导出数据到PDF的功能,涉及到文本.表格.图表等内容.在做图表功能时,发现之前用Highcharts做的图表根本就不能集成到PDF中.这里需要一个能在程序后台就生成图表的功能 ...
- JavaWeb图表插件的小研究
背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...
- WEB 前端开发插件整理
下拉框插件 1.select http://select2.github.io/ 2.双 select http://loudev.com 3.selectbox http://aui.github. ...
- 数据图表插件echarts(二)
前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...
- 实时更新数据的jQuery图表插件DEMO演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- HTML基础——网站后台显示页面
1.框架集标签:(作用:将页面进行区域的划分) <frameset rows="" cols=""> <frame src="&qu ...
- SpringBoot学习笔记(12)----SpringBoot实现多个 账号轮询发送邮件
首先,引入发送邮件的依赖,由于freemarker自定义模板,所以也需要把freemarker的依赖引入 pom.xml文件 <dependency> <groupId>org ...
- NOIp模拟赛二十九
又是受虐的一天呢~接下来四天都要打模拟赛QAQ 今日分数:0(100)+100+0=100 A题O(读入)结论题判断结果时没return 0被subtask卡成0分,喜提fstQAQ,B题DP,C题不 ...
- CDQ分治笔记
以前一直不会CDQ……然后经常听到dalao们说“这题直接CDQ啊”“CDQ不就秒了吗”的时候我只能瑟瑟发抖QAQ CDQ分治 其实CDQ分治就是二分分治,每次将$[l,r]$的问题划分为$[l,mi ...
- 微信小程序 上传图片
效果图 如上,js 如下,在页面循环图片就可以 /** * 选择图片 */ uploadImgAdd: function(e) { var imgs = this.data.imgs; wx.ch ...
- Mac安装软件时,提示文件已损坏,需要移动到废纸篓的解决方法
1.修改系统偏好设置,安全性与隐私-->将“允许从以下位置下载的应用” ☑️任何来源. 2. mac10.12以上的系统一般没有“任何来源”这个选项,需打开terminnal终端,输入 sudo ...
- 【Henu ACM Round#24 C】Quiz
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 肯定是这样 先放k-1个,然后空1个,然后再放k-1个.然后再空1个.. 以此类推. 然后如果(n/k)*(k-1)+n%k> ...
- POJ 1975 Median Weight Bead
Median Weight Bead Time Limit: 1000ms Memory Limit: 30000KB This problem will be judged on PKU. Orig ...
- Qt 学习之路问题
Qt5 cannot include the file QMainWindow add "greaterThan(QT_MAJOR_VERSION, 4): QT += widgets&qu ...
- Block的使用--初探Block
看了两天的Block. 网上是有非常多解说与教程,也有讲得非常好的.这里就主要解说下我的理解与收获.欢迎拍砖. 所谓block.我觉得应该是一个闭包函数.而闭包,就是说block以及内部全部的变量生命 ...