highchart柱状堆叠图动态数据请求
$(function () {
var options = {
chart: {
renderTo: 'indoor',
type: 'column',
},
title: {
text: '室内问题'
},
xAxis: {
categories: ['MR弱覆盖楼宇', '高2无4', '2G高倒挂', '投诉', '保障需求', '市场需求'],
labels: {
rotation:0
}
},
yAxis: {
max: 1000,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
pointWidth:'30',
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: '已提方案',
data: [],
color: '#FFA500'
}, {
name: '待提方案',
data: [],
color: '#228B22'
}]
};
var newWithoutDemand =[];
var newWithDemand =[];
$.ajax({
url: '/Public/StatIssueByBranch?BranchID=1&CellularTypeID=2',
type: 'GET',
dataType: 'json',
success: function (data) {
for(var i=0;i<data.length;i++){
newWithoutDemand.push(data[i].WithoutDemand);
newWithDemand.push(data[i].WithDemand);
}
console.log('###')
var obj = newWithDemand;
var obj1 = newWithoutDemand;
options.series[0].data = obj;
options.series[1].data = obj1;
console.log(obj)
console.log(obj1)
chart = new Highcharts.Chart(options); //这里顶部chart
},
error: function () {
console.log(error)
}
});
});
下面是我的公众号,大家可以关注一下,可以一起学习,一起进步:

highchart柱状堆叠图动态数据请求的更多相关文章
- java项目使用Echarts 做柱状堆叠图,包含点击事件
基础知识请自行百度查看,以下直接贴出实现代码: <%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图
作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...
- 柱状堆积图Echarts
Map<String,Object> map = new HashMap<String, Object>(); //图例的千人.双百 HashMap<String, St ...
- highcharts 柱形堆叠图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- layui 轮播图动态数据不显示问题
layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...
- Echarts 学习系列(3)-Echarts动态数据交互
写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...
- HighChart 实现从后台取数据来实时更新柱状和折线组图
前段时间公司让弄图表,给我说有HighCharts这个js插件,于是上网上搜,由于本人是写后端的,对于JavaScript和jQuery不是很熟悉,虽然找到了模板,但是还是不明白,所以一点一点的改,但 ...
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
随机推荐
- GitHub使用笔记1:git客户端配置多ssh key
公司用gitlab 外网的github同时配置 这样就导致我们要配置不同的ssh-key对应不同的环境. 具体操作步骤如下: 1:生成一个公司用的SSH-Key $ ssh-keygen -t rsa ...
- node.js 初学(一)—— http fs 服务器/文件/post get
node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...
- k8s build new API
apiserver-builder git hub api conventions storage api arch step by step, we can follow it. api con ...
- C#实现根据地图上的两点坐标,计算直线距离
根据地图上的两点坐标,计算直线距离,在网上找到javascript的写法,用C#实现一下 /// <summary> /// 根据地图上的两点坐标,计算直线距离 /// </summ ...
- webpack对于引入的模块无法智能代码提示
前端模块太多了,模块里的方法比较难记住,所以我们一般靠的都是IDE的代码提示. 但是有时候我们会发现对于引入的模块没有代码提示,我也安装了模块呀,为什么没有代码提示? 主要是package.json的 ...
- Java网络通信方面,BIO、NIO、AIO、Netty
码云项目源码地址:https://gitee.com/ZhangShunHai/echo 教学视频地址:链接: https://pan.baidu.com/s/1knVlW7O8hZc8XgXm1dC ...
- python --- 05 字典 集合
一.字典 可变数据类型 {key:value}形式 查找效率高 key值必须是不可变的数据类型 1.增删改查 1).增 dic["新key"] = "新va ...
- Jenkins中的邮件配置
摘自http://blog.csdn.net/fullbug/article/details/53024562 Jenkins是一个很受欢迎的CI持续集成工具,能够实现项目的自动构建.打包.测试.发布 ...
- 2018年第九届蓝桥杯B组题C++汇总解析-fishers
2018年第九届蓝桥杯B组题C++解析-fishers 题型 第一题:第几天 第二题:明码 第三题:乘积尾零 第四题:测试次数 第五题:快速排序 第六题:递增三元组 第七题:螺旋折线 第八题:日志统计 ...
- Java 实现一个自己的显式锁Lock(有超时功能)
Lock接口 package concurency.chapter9; import java.util.Collection; public interface Lock { static clas ...