<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. 一种swift编码风格指南（供参考，by linkedin）

    http://www.cocoachina.com/swift/20160701/16894.html

  2. android Listview item 中有button，item就不响应触摸事件

    为button设置 beanButton.getButton().setFocusable(false); beanButton.getButton().setFocusableInTouchMode ...

  3. 从高版本JDK换成低版本JDK报错Unsupported major.minor version 52.0

    ava.lang.UnsupportedClassVersionError: PR/Sort : Unsupported major.minor version 52.0这个错误是由于高版本的java ...

  4. imx6 RGB LCD

    imx6dl需要支持lcd接口的屏,imx6dl的datasheet并没有明确的说明lcd相关的配置,只在Display Content Integrity Checker (DCIC)一章中介绍.本 ...

  5. Intellij IDEA @Override 标红

    Intellij IDEA 升级到15之后,之前那些@Override 的都标红,提示@Override is not allowed when implement interface method ...

  6. 通过css3实现开关选择按钮

      通过css属性实现如图所示按钮 要点:通过checkbox选中与否的状态与兄弟选择器实现相关功能 1.设置开关大小并设置定位方式为relative .swift-btn {     positio ...

  7. Shell函数语法

    Shell函数语法 定义函数: function   函数名(){ 指令... } 调用函数,方法1: 函数名 调用函数,方法2: 函数名  参数一   参数二 return在函数里面使用会跳出函数并 ...

  8. nohup和&的区别

    nohup和&的区别http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=4241330&fromuid=21288388 ...

  9. yum报错： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again

    在Centos 5.x或6.x上安装RHEL EPEL Repo repository,资源库,源的意思.RHEL EPEL(Extra Packages for Enterprise Linux)  ...

  10. gcc工具链简述

    工具链软件包括BINUTILS.GCC.GLIBC.GDB等. BINUTILS是二进制程序处理工具,包括链接器.汇编器等目标程序处理的工具. GCC(GNU Compiler Collection) ...