jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码:
<script type="text/javascript">
$(function(){
showLine();
showColumn();
showPie();
}); function showPie(){
jQuery.ajax({
type: "get",
url: "csylLine.json",
async: false,
dataType: "json",
success:function(data1){
$('#pieChart').highcharts({
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false,
type: 'pie'
},
title : { // 标题
text : '城关区一周降雨地区占全城份额比例'
},
tooltip : { // 提示框
pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : false
},
showInLegend : true
}
},
series : [ { // 数据列
name : 'Browser share',
data : data1.dataList
} ],
credits:{ // 版权信息
enabled:false
}
}); },
error:function(err){
alert(err);
}
});
}
function showLine() {
jQuery.ajax({
type: "get",
url: "csylLine.json",
async: false,
dataType: "json",
success:function(data1){
$('#lineChart').highcharts({
title: {
text: '城关区一周内气温情况折线图',
x: -20
},//center标题
xAxis: {
categories: data1.xList
}, //横坐标数据点文字
yAxis: {
title: {
text: 'Temperature (°C)' //Y坐标说明
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
borderWidth: 0
},
series: data1.yList, //此处定义两个series,即两条线,最高气温柔最低气温,假设很多其它则在里面加入大括号。 credits: { // 版权信息
enabled: false
}
});
}
});
} function showColumn() {
jQuery.ajax({
type: "get",
url: "csylLine.json",
async: false,
dataType: "json",
success:function(data1){
$('#columnChart').highcharts({
chart: {
type: 'column' //柱形图
},
title: {
text: '城关区一周降雨预报'
},
xAxis: {
categories: data1.xList
},
yAxis: {
min: 0,
title: {
text: '%/mm'
}
},
tooltip: {
pointFormat:'{series.name}: <b>{point.y} </b>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: data1.zList,
});
}
});
} </script>
后台传參json格式:
{
"xList":["09-10", "09-11", "09-12", "09-13", "09-14", "09-15", "09-16"],//x轴的数据(折线、柱形)
"yList":[{
"name": "日最高温","data": [28,28,27,26,29,32,25]
}, {
"name": "日最低温","data": [15,15,14,13,16,19,12]
}],
"zList":[{
"name": "降雨几率",
"data": [16.0, 20.6, 48.5, 27.4, 19.1, 15.6, 0]
},{
"name": "日降雨量",
"data": [0.8, 0.5, 9.3, 1.0, 0.8, 0.6, 0]
}],//折线图和柱形图是一致的
"dataList":[
["城东",1],["平区",2],["东区",4],["西区",1],["郊区",1]
]//饼状图数据 }
jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码的更多相关文章
- Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- java 柱状图、折线图、饼状图
1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...
- ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- Android之自定义控件实现天气温度折线图和饼状图
以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * ...
- Android开源图表之树状图和饼状图的官方示例的整理
最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...
- C# 绘制图表(柱状图,线性图,饼状图)
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- highcharts柱状图、饼状图
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
随机推荐
- asp.net笔试题
1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成 ...
- 解决Java compiler level does not match the version of the installed Java project facet.问题
其实之前遇到过Java compiler level does not match the version of the installed Java project facet.这个问题,因为当时没 ...
- HTTP数据包头解析(简单清楚)
[转]HTTP请求模型和头信息参考 参考: http://blog.csdn.net/baggio785/archive/2006/04/13/661410.aspx模型: http://blog.c ...
- JAVA Useful Program(1)
public static void main(String[] args){ //字符串有整型的相互转换 String str=String.valueOf(123); ...
- kgdb调试注意事项
0 首先提下注意事项的背景: kgdb和printk共用一个串口 1 设置波特率: //最高支持460800波特率 arm-eabi-gdb ./vmlinux ...
- ActiveX控件的安全初始化和脚本操作 和 数字签名SIGN
摘要:数字签名SIGN保证控件在下载时候的安全性.如果你的代码已经经过数字签名,即使用户IE的安全设置很高也能下载,安装并登记.但是在页面上初始化,或者用脚本运行这个控件,为了保证安全性,还需要进行M ...
- HDU 1254 推箱子游戏(搞了一下午。。。)
中文题目:http://acm.hdu.edu.cn/showproblem.php?pid=1254 一开始常规的人用来做主导,想着想着不对劲,其实是箱子为主导,人只是箱子能否推进的一个判断. 可以 ...
- Hibernate(五)——经典解析一对一关联映射
前面两篇介绍了多对一.一对多的映射.今天分享下一对一的关联映射关系.有两种策略可以实现一对一的关联映射:主键关联.唯一外键关联. 主键关联——两个表有完全相同的主键值,来表示它们的一对一的关系.数据库 ...
- VMWARE安装MAC时无法移动鼠标?
1.先不要怀疑你的软件 2.查看你的硬件设置 3.什么?你把USB去除了? 4.给我加回来!!! 5.OK!鼠标可以移动了!
- 让自己的软件实现拖拽打开文件(使用WM_DROPFILES消息和DragQueryFile函数)
//声明 protected procedure WMDROPFILES(var Msg : TMessage); message WM_DROPFILES; //实现 procedure TForm ...