<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. php创建网站问题

    网站在本地浏览的时候链接点击都提示The requested URL was not found on this server. 本地装的wamp,apache和php.ini都是好的 最后更改: 在 ...

  2. Mac 系统下将普通文件变为可执行文件

    在使用Cocospods时,老是提示我pod文件里面有文稿的东西.后来想到前同事将他变为可执行文件了.所以百度了一下,方法如下: chmod +x (此处是文件的地址) 就可以了

  3. imx6 MFG TOOL 分析

    之前分析过mfgtool的内容,最近从官网下载,返现新版的mfgtool工具将imx6各种版本的linux/android都使用一个工具进行烧录.所以从新分析一下. 新版与旧版的一个区别是烧写使用的u ...

  4. ubuntu12.04 登录黑屏

    新安装的ubuntu12.04LTS,登录之后黑屏,切换到ubuntu2D能够进入UI.解决方法记录于此. 转载: http://blog.csdn.net/albertsh/article/deta ...

  5. js实现图片向上播放（轮番滚动）

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  6. Java Convert String & Int

    To convert a int to string: int num = 123; String str = String.valueOf(num); To convert a string to ...

  7. Java: Class Variable/Static Variable

    1. Class Variable/Static Variable: Class variable is also known as static variable with "static ...

  8. php 扩展dll

    一.准备工作: 注:php5.2没有vc9,php5.3.php5.4没有vc6.呵呵.PHP5.5开始,不支持xp和win2003了,更是vc11了.--------------->所以,扩展 ...

  9. wordpress 天气插件开发

    <?php /* * author by:wordpress教程网(http://www.wpnoob.cn) * url: * */ class weatherWidget extends W ...

  10. 九个uname命令获取Linux系统详情的实例

    当你在控制台模式下,无法通过“鼠标右键 > 关于”获取操作系统的信息.这时,在Linux下,你可以使用uname命令,帮助你完成这些工作. Uname是unix name的缩写.在控制台中实际使 ...