js:

function chart(data,title){
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: title
},
subtitle: {
text: '数据来源:'
},
xAxis: {
categories: ['总金额', '收回金额'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '金额 (软妹币)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' 软妹币'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'you',
data: data
}]
});
}

jsp页面js:

<script type="text/javascript">
  $('#search').click(function(){
    var url = "${xxx}/orderEffectIndexData";
    $.post(url,{},function(data){
    chart(data.dataList,'常规催付效果呦!!');
},'json')
})
</script>

效果:

highCharts实现简单柱形图的更多相关文章

  1. Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  2. highcharts的简单使用

    在使用过的图表js插件中,个人认为还是highcharts最好,无论从兼容性,渲染速度,甚至是文档详细上来说,都一直觉得highcharts更胜一筹.现在花点时间做一下简单的总结,比如从一个矩形图开始 ...

  3. ASP.NET MVC中使用highcharts 生成简单的折线图

        直接上步骤:   生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...

  4. highcharts折线图-柱形图等

    https://www.highcharts.com.cn/demo/highcharts/line-basic

  5. Highcharts使用教程(1):制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  6. Ionic实战五:ionic图表源码基于highcharts

    ionic图表demo基于Highcharts,highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.HighCha ...

  7. Highcharts的常用属性及导出SVG

    做了好几个项目都用到了Highcharts,好用自然不用多说,这里总结一下每次作图经常用的一些配置,方便以后查看. 引入Highcharts非常简单,只需引入对应的js,页面中写入存放表格的div,j ...

  8. R语言:ggplot2精细化绘图——以实用商业化图表绘图为例

    本文版权归http://www.cnblogs.com/weibaar 本文旨在介绍R语言中ggplot2包的一些精细化操作,主要适用于对R画图有一定了解,需要更精细化作图的人,尤其是那些刚从exce ...

  9. python---图表的使用

    一:使用预览 二:插件使用来源 Highcharts(本次使用) ECharts 三:插件的使用 HighCharts的简单上手 (一)后台传递数据 getHchart方法获取用户数据(用户名,数据列 ...

随机推荐

  1. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  2. 谷歌内核浏览器 iframe内容的 tab切换 滚动条消失

    问题: 新版本的-webkit- 内核浏览器 在tab切换时,iframe 内容区 丢失滚动条 如下图 (虽然滚动条位置还在,可以垂直滚动,但滚动条不见了) 解决思路: 让iframe重新计算宽高,重 ...

  3. 企业级数据库监控利器Lepus

    开篇介绍官方网站:http://www.lepus.cc开源企业级数据库监控系统简洁.直观.强大的开源数据库监控系统,MySQL/Oracle/MongoDB/Redis一站式性能监控,让数据库监控更 ...

  4. EntityFramework Core 2.0执行原始查询如何防止SQL注入?

    前言 接下来一段时间我们来讲讲EntityFramework Core基础,精简的内容,深入浅出,希望为想学习EntityFramework Core的童鞋提供一点帮助. EntityFramewor ...

  5. 304和浏览器http缓存

    浏览器虽然发现了本地有该资源的缓存,但是不确定是否是最新的,于是想服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304. 浏览器缓存分为强缓存和协商缓存. 1.浏览器请求某资源,通过he ...

  6. 流处理与消息队列------《Designing Data-Intensive Applications》读书笔记16

    上一篇聊了聊批处理的缺点,对于无界数据来说,流处理会是更好的选择,"流"指的是随着时间的推移逐步增加的数据.消息队列可以将这些流组织起来,快速的在应用程序中给予反馈.但是消息队列与 ...

  7. 【Unity3D】Unity3D开发《我的世界》之四、创建一个Block

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_04.html 一.新建Block类 我们的Block类用来存储跟Block相关的信 ...

  8. Android的微信智能心跳方案

    原文地址: 年11月中旬时,因为基础组件组人手紧张,Leo安排我和春哥去广州轮岗支援.刚到广州的时候,Ray让我和春哥对Line和WhatsApp的心跳机制进行分析.我和春哥抓包测试了差不多两个多礼拜 ...

  9. PCI、CPCI、CPCIE 区别、特点

    PCI.CPCI.CPCIE 区别.特点 CPCI总线 •PCI总线作为处理器系统的局部总线,主要目的是为了连接外部设备,而不是作为处理器的系统总线连接Cache和主存储器 •(1) PCI总线空间与 ...

  10. javascript学习笔记01--javascript的基本介绍

    javascript 的基本介绍1,是用于web开发的脚本语言①脚本语言往往不能独立使用 它需要和html等配合使用②脚本语言有自己的变量,函数 控制语句③解释性语言/编译语言 脚本语言实际是解释性语 ...