<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. Android高级之第十一讲Hybird开发

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 随着移动端应用平台的兴起,需求和交互方式的多样化,H5开发逐渐在移动端流行起来:常见的移动产品有We ...

  2. .NET对象与Windows句柄（二）：句柄分类和.NET句柄泄露的例子

    上一篇文章介绍了句柄的基本概念,也描述了C#中创建文件句柄的过程.我们已经知道句柄代表Windows内部对象,文件对象就是其中一种,但显然系统中还有更多其它类型的对象.本文将简单介绍Windows对象 ...

  3. [LeetCode] Subsets （bfs的vector实现）

    Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...

  4. 让UITableView 的 headerView跟随 cell一起滚动,tableHeaderView

    在进行UITableView开发的时候,我们有时希望在cell的上面放置一些按钮之类的空间,又想让这些空间跟着cell一起滚动,刚开始想着hederView,注意,这是tableView的sectio ...

  5. WebMethod属性详解

    WebMethod有6个属性:.Description.EnableSession.MessageName.TransactionOption.CacheDuration.BufferResponse ...

  6. 长城坑爹宽带，劫持用户DNS赚取购物返利

    今天回来登录www.jd.com 打算淘点东西,登录后发现地址栏跳到 http://www.jd.com/?utm_source=click.linktech.cn&utm_medium=tu ...

  7. Magento PHP Extension "curl" must be loaded解决方法

    我记得我第一次在xampp装magento的时候,进入后台时提示PHP Extension "curl" must be loaded 在网页上查了下原因和解决方法,发现是mage ...

  8. 登录不到phpmyadmin

    或许出现以下错误情况:phpmyadmin:#1045 无法登录 MySQL 服务器.Access denied for user ‘root’@’localhost’ (using password ...

  9. Excel 的一些用法--行号赋给一列

    1.鼠标选定要赋值的列 2.在 输入 =Row() 3. Ctrl+Enter

  10. iOS7跳转AppStore地址

    跳转AppStore地址改变: 由 itms-apps://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews? ...