使用Highcharts实现柱状图展示
第一步
新建页面line.html,引入HighCharts核心js文件
<script type="text/javascript" src="../../js/Highcharts/highcharts.js"></script>
第二步
插入折线图容器 <div id="container"></div>
第三步
编写脚本从服务器端请求数据
makeColumnChart("DBT_GLWMD","#container1");
function makeColumnChart(chartName,container) {
$(container).show();
$(container).empty();
var request;
index = layer.load(1, {
shade : [ 0.1, '#fff' ] //0.1透明度的白色背景
});
request = $
.ajax({
url : "../../subjectInfo",
type : "POST",
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
data : {
operType : "chart_Column",
startYear : $.trim($("#startYear").val()),
//endYear : $.trim($("#endYear").val()),
cName : chartName
},
dataType : "html"
});
if(chartName=="DBT_GLWMD"){
titleText = $("#startYear").val() + '年公路网密度对比图';
}
if(chartName=="DBT_PTGX"){
titleText = $("#startYear").val() + '年普通干线二级及以上比例对比图';
}
if(chartName=="DBT_NCGL"){
titleText = $("#startYear").val() + '年农村公路等级及以上比例对比图';
}
request.done(function(msg) {
layer.close(index);
if (msg != "") {
var jdata = strToJson(msg);
if(chartName=="DBT_GLWMD"){
creatColumn(jdata, titleText, container);
}
if(chartName=="DBT_PTGX"){
creatColumnWithPer(jdata, titleText, container);
}
if(chartName=="DBT_NCGL"){
creatColumnWithPer(jdata, titleText, container);
}
}
});
}
function strToJson(str) {//字符串转换为json
var json = eval('(' + str + ')');
return json;
}
第四步
服务器端获取数据
result="[{name: '全省',y:"+sProvince+" }, {name: '贫困地区',y:"+sPK+" }, {name: '"+sCountyName+"',y:"+sCounty+"}]";
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(result);
第五步 编写脚本生成柱状图
function creatColumn(data,titleStr,container) {
$(container)
.highcharts(
{
lang : {
printChart : "打印图表",
downloadJPEG : "下载JPEG 图片",
downloadPDF : "下载PDF文档",
downloadPNG : "下载PNG 图片",
downloadSVG : "下载SVG 矢量图",
exportButtonTitle : "导出图片"
},
chart: {
type: 'column'
},
title: {
text: titleStr
},
credits : {
enabled : false
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.0f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f}</b> of total<br/>'
},
series: [{
name: '对比图',
colorByPoint: true,
data: eval(data)
}]
});
}
function creatColumnWithPer(data,titleStr,container) {
$(container)
.highcharts(
{
lang : {
printChart : "打印图表",
downloadJPEG : "下载JPEG 图片",
downloadPDF : "下载PDF文档",
downloadPNG : "下载PNG 图片",
downloadSVG : "下载SVG 矢量图",
exportButtonTitle : "导出图片"
},
chart: {
type: 'column'
},
title: {
text: titleStr
},
credits : {
enabled : false
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
},
labels: {//y轴刻度文字标签
formatter: function () {
return this.value + '%';//y轴加上%
}
},
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter : function() {
return this.y + "%"; //返回百分比和个数
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f}%</b> of total<br/>'
},
series: [{
name: '对比图',
colorByPoint: true,
data: eval(data)
}]
});
}
转载于:https://www.cnblogs.com/zhangyg/p/8623932.html
使用Highcharts实现柱状图展示相关推荐
- 汇编语言--学生管理信息管理--输入输出排序柱状图展示
一.题目任务 有10个学生,每个学生有3门课程成绩,从键盘输入以上信息(包括学生学号.姓名.三门课程成绩),计算出平均成绩,将所有数据以空格分开,与平均成绩一并按每人一行的格式存入文件stu.dat或 ...
- 点击highcharts下钻柱状图更改其他柱子图
highcharts图,需求: 图1为下钻图,并且点击图1,图2[,图3,-]会发生变化 重新绘制highcharts图参考链接:HighChart学习-更新数据data Series与重绘 思路 使 ...
- python柱状图挨在一起_echarts多个柱状图展示问题(bar都挤到一起了)
设置bar的宽度也不行,增加区间长度也不行 展示是这种情况 附上option对象 { "calculable": true, "dataZoom": [ { & ...
- 跟着iMeta学做图|双侧柱状图展示具有正负相关性的类型数量
源代码已经上传至https://github.com/iMetaScience/iMetaPlot/tree/main/230130barplot 如果你使用本代码,请引用:Changwu Wu. 2 ...
- echarts 如何使柱状图左右展示_echarts 柱状图展示数据
carEcharts(time,data,data2){ let Ehcarts=echarts.init(document.getElementById("carEcharts" ...
- 数据可视化 | Python绘制多维柱状图:一图展示西部各省人口变迁【附本文数据和代码】
查看原文:[数据seminar]https://mp.weixin.qq.com/s/pvx2ZzLbrBL-6cyOwVATOA Part1前言 柱状图是利用柱子的高度来反映数据差异的统计图,与一维 ...
- 柱状图、堆叠柱状图、瀑布图有什么区别?怎样用Python绘制?(附代码)
来源:大数据DT(ID:hzdashuju) 作者:屈希峰,资深Python工程师,知乎多个专栏作者 本文约8000字,建议阅读20分钟 柱状图是当前应用最广泛的图表之一,你几乎每天都可以在电子产品上 ...
- python 绘制柱状图-Python使用Plotly绘图工具,绘制柱状图
使用Plotly绘制基本的柱状图,需要用到的函数是graph_objs 中 Bar函数 通过参数,可以设置柱状图的样式. 通过barmod进行设置可以绘制出不同类型的柱状图出来. 我们先来实现一个简单 ...
- python 画柱状图-python使用Plotly绘图工具绘制柱状图
本文实例为大家分享了python使用Plotly绘图工具绘制柱状图的具体代码,供大家参考,具体内容如下 使用Plotly绘制基本的柱状图,需要用到的函数是graph_objs 中 Bar函数 通过参数 ...
最新文章
- sscanf,sprintf,fscanf,fprintf 系列函数
- 每日Ubuntu小技巧:合上笔记本,系统不睡眠
- intx update task - IB_IBINTX_UPDATE
- 不均衡数据的处理方法
- Tips--windows系统下gcc编译C文件为so共享库
- Oracle基本数据标准存储样式浅析(二)——数字标准
- “FreeTextBox”控件使用——Word编辑器
- VTD信号灯TrafficLight数据解析提取
- Java中的无锁编程
- BUUCTF刷题-RAR 压缩包暴力破解密码
- Python Numpy
- MATLAB的.fig文件打不开——有效解决
- 敬业签桌面便签软件:该openid已被使用,无法绑定!(适用QQ微信互联登录解绑)
- Postman教程——发送第一个请求
- 好佳居软装十大品牌 掌握新中式软装风格
- Unity-UGUI提高开发效率的插件集合
- 《Pro SQL Server Internals, 2nd edition》节选翻译(4)
- 机器学习_深度学习毕设题目汇总——人脸B
- 范特西公司面试2012/10/23
- 遥望星空补丁工具 V1.7