<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. Redis学习笔记--五种数据类型的使用场景

    String 1.String 常用命令: 除了get.set.incr.decr mget等操作外,Redis还提供了下面一些操作: 获取字符串长度 往字符串append内容 设置和获取字符串的某一 ...

  2. C++位操作符总结

    #include <stdio.h> #include <memory.h> #include <malloc.h> #define MaxBinLength 16 ...

  3. C/C++链表操作（面试）

    1.为了反转这个单链表,我们先让头结点的next域指向结点2,再让结点1的next域指向结点3,最后将结点2的next域指向结点1,就完成了第一次交换,顺序就变成了Header-结点2-结点1-结点3 ...

  4. Fiddler-001-抓包工具初识

    Fiddler 是一个非常简单的网络调试器,也是目前最常用的http抓包工具之一 .通过 Fiddler,我们能够能够记录客户端和服务器之间的所有 HTTP请求,即记录并检查所有你的电脑和互联网之间的 ...

  5. MVC路由约束

    public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/ ...

  6. CSS布局一

    CSS布局一 实例一(居中) div#container{ width:960px; height:650px; margin:0 auto; border:1px solid #ccc; /*就是说 ...

  7. JavaScript：综合案例---房贷计算器的实现

    房贷计算器的实现 (可以使用的编辑器:webStrom.subLime.notePad++.editPlus) 输入数据: 平方单价 70,000.00 元/平方  B1 租金 382.50 元/平方 ...

  8. TFS 2013 配置的时候,提示TF255466错误

    TFS 2010 配置的时候,提示TF255466错误  花舞花落泪 2013-11-08 10:19:37 在验证是否可以安装 SharePoint 时的提示,Error [ System Chec ...

  9. Python模块(MySQLdb)

    MySQLdb模块是python用来连接mysql的第三方模块,安装 pip install mysql-python 连接mysql: 主要两步,建立mysql连接对象.游标对象.再操作数据库 im ...

  10. 仿Smarty替换模板标签时遇到的问题

    最近正在做一个微型的仿TP框架,当然以鄙人之技术只能略仿表层,于是遇到的问题层出不穷.今天做到View层替换模板部分,本以为一下子搞掂的事,果不其然又是败下阵来. 好了,来重点. 模板文件 test1 ...