<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="../../Scripts/highcharts/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var columnName = "";
var Key = "";

var date = new Array();
var val = new Array();
$(function () {
$.ajax({
type: "post",
url: "/Charts/getList",
async: false,
success: function (str) {
var str2 = $.parseJSON(str);
if (str2.length > 0) {
for (var i = 0; i < str2.length; i++) {
// if (i == 0) {
// columnName += str2[i].年月;
// Key += str2[i].统计;
// mycars[i] = str2[i].统计
// }
// else {
// columnName += "," + str2[i].年月;
// Key += "," + str2[i].统计;
// mycars[i] = str2[i].统计
// }

//此处楼主需要显示的X轴为"X月份"这么个字符串，后台取得的数据而仅仅为数字，对此进行加工
date.push(str2[i].年月 + "月份");
//也可以在对数据的处理放在highchart 中进行处理。
val.push(parseFloat(str2[i].统计));
}

}
}
});
});

onload = function () {
// alert(date);
// alert(val);

$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '月出借款额度'
},
subtitle: {
text: 'Source: 9fbank.com'
},
xAxis: {
categories: date
// [
// date
// ]
},
yAxis: {
min: 0,
title: {
text: '借款 (元)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '出借额度',
data: val //[
//"49.9"*"1"
//, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4
//val

//]

}]
});
}

</script>

<body>
<div id="container" style="min-width: 700px; height: 400px">
</div>
</body>

-----------------------------------

上面 ajax  请求的   /Charts/getList  返回的是josn 字符串

自己做的时候 比较坑的是 ，自己一直把数组 放到  categories: [ date  ]   中括号 内，所以一直调不出来，

highcharts 实例的更多相关文章

  1. highcharts实例教程二：结合php与mysql生成饼图

    上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例 ...

  2. Highcharts实例

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. highcharts实例教程一：结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

  4. highcharts与highstock实例

    highcharts实例代码 <head> <title>highcharts报表示例</title> <meta http-equiv="Cont ...

  5. HighCharts学习笔记（一）HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...

  6. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  7. Highcharts的自适应DOM或者DIV，JS方法实现

    那我们就按照官网的一分钟极速入门代码来说 // 图表配置 var options = { chart: { type: 'bar' //指定图表的类型,默认是折线图(line) }, title: { ...

  8. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  9. highcharts 使用实例

    后端使用django实现,返回的数据可以修改为从数据库获取或其他方式获取,实例里是写死的数据. urls配置: url(r'^outip/chart/$', views.charts), url(r' ...

随机推荐

  1. JVM 常用配置

    JVM的配置,最常用的两个配置就是:-Xms512m –Xmx1024m -Xms设置JVM的初始化内存大小,-Xmx为最大内存大小,当突破这个值,将会报内存溢出,导致的原因有很多,主要是虚拟机的回收 ...

  2. 记录下 QT Linux 静态编译遇到的坑

    Qt下静态编译Qt,根据我的经验,如果按照Windows下那种直接拿官方sdk安装之后的文件来编译是行不通的,需要直接下载Qt的source包,目前诺基亚的源码叫做qt-everywhere-open ...

  3. EF6 CodeFirst 启用Migration，常用命令

    Enable-Migrations –EnableAutomaticMigrationsAdd-Migration [MigrationName] [-Force]Update-Database –T ...

  4. iOS视图控制对象生命周期

    iOS视图控制对象生命周期-init.viewDidLoad.viewWillAppear.viewDidAppear.viewWillDisappear.viewDidDisappear的区别及用途 ...

  5. Surround the Trees---hdu1392（凸包GraHam模板）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1392 题意:有n棵树,每棵树有一个坐标,想用一些绳子把这些树包含起来,求需要绳子的长度: 就是求凸包的 ...

  6. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  7. out 和 ref 之间的区别整理

    ref和out都是C#中的关键字,所实现的功能也差不多,都是指定一个参数按照引用传递. 对于编译后的程序而言,它们之间没有任何区别,也就是说它们只有语法区别. 总结起来,他们有如下语法区别: 1.re ...

  8. jquery 日历插件datepicker格式调整

    <script> $(function() { $("#datepicker").datepicker({ dateFormat: "yy/mm/dd&quo ...

  9. JQuery：JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  10. Fast and Robust Hand Tracking Using Detection-Guided Optimization

    http://handtracker.mpi-inf.mpg.de/projects/FastHandTracker/