<div id="TradeMoney"></div>
<script>
$(function () {
initData();
}); function initData() { var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'TradeMoney', //放置图表的容器
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'line',
reflow: true //默认为true 所以可以不配置
},
title: {
text: '订单金额曲线'
},
subtitle: {
text: ''
},
xAxis: {//X轴数据
categories: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09', '2015-10'],
labels: {
rotation: -, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
},
yAxis: {//Y轴显示文字
title: {
text: '订单金额/元'
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, );
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: [{
name: '总金额',
data: [, , , , , , , , 19.4, ] }, {
name: '成功金额',
data: [, , , , , , , , 10.3, ] }, {
name: '失败金额',
data: [, , , , , , , , , ]
}]
});
}
</script>

注意:

1、数据格式要一致,X轴['a','b','c','d'],Y轴[0,0,0,3],可以在后台进行字符串拼接value="["+....+"]",然后在前台转换成对象eval(value);

2、highcharts.js版本一定要与JQuery对应,否则会出现首次加载有数据无折线,只有拖动窗体改变其大小后才显示折线,坑惨了,切记;

3、显示图表的div容器的高和宽如果未指定,将默认是400*400。

HighCharts绘制图表的更多相关文章

  1. 使用highcharts 绘制Web图表

    问题描述:     使用highcharts 绘制Web图表 Highcharts说明: 问题解决:     (1)安装Highcharts     在这些图表中,数据源是一个典型的JavaScrip ...

  2. Highcharts使用CSV格式数据绘制图表

    Highcharts使用CSV格式数据绘制图表 CSV(Comma-Separated Values,逗号分隔值文本格式)是採用逗号切割的纯文本数据.通常情况下.每一个数据之间使用逗号切割,几个相关数 ...

  3. Highcharts使用表格数据绘制图表

    Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...

  4. 使用highcharts绘制美观的燃尽图

    使用highcharts绘制美观的燃尽图 助教在博客中介绍了两种绘制燃尽图的方法,但是我们组在使用时发现有些任务不适合写进issue,而且网站生成的燃尽图不是很美观,因此我们打算使用其他方法自己绘制燃 ...

  5. 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

    工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts:   ...

  6. DWR(AJAX)+Highcharts绘制曲线图,饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...

  7. 使用D3绘制图表(7)--饼状图

    这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...

  8. 使用Highcharts实现图表展示

    本篇随笔记录的是本人2011年做广州地铁协同办公项目时,图表需求的解决方案.(Demo中只是虚拟的测试数据) 关键技术点: 使用Highcharts实现图表展示: 另外使用Highslide弹窗.使用 ...

  9. 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

随机推荐

  1. c# signalr聊天室开源资料

    SignalR+LayIM源码: http://www.cnblogs.com/panzi/p/5742089.html 钉钉客户端源码: http://www.cnblogs.com/loveson ...

  2. 0512 Scrum 4.0

    看板设计 每日例会时间定于下午放学回到宿舍,地点是在宿舍外的走廊或宿舍里,特殊情况待定: 团队开会照片 任务认领: 首页设计-------王俊杰 鸡汤版面-------列志华 论“汤”版面------ ...

  3. Java堆栈的应用1----------堆栈的自定义实现以及括号匹配算法的Java实现

    接下篇:http://www.cnblogs.com/fuck1/p/5995857.html 堆栈的应用1:括号匹配算法 括号匹配问题 假设算术表达式中包含圆括号,方括号,和花括号三种类型.使用栈数 ...

  4. JavaScript encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent()

    URI:  Uniform Resource Identifier encodeURI() And decodeURI() The encodeURI() function is used to en ...

  5. Codeforces 749D:Leaving Auction(set+二分)

    http://codeforces.com/contest/749/problem/D 题意:有几个人在拍卖场竞价,一共有n次喊价,有q个询问,每一个询问有一个num,接下来num个人从这次拍卖中除去 ...

  6. sprint2 项目的粗略展示

  7. Script 语言的简单练习题 乘法口诀

    <script>for(var i=1;i<=9;i++){ for(var k=1;k<=i;k++) { document.write(k+"x"+i+ ...

  8. Apache配置多个网站

    你可以全用本地私有ip地址创建多个站点 127.0.0.x,这个网段的所有ip都是指向本机的,并且可以区分,这是计算机的私有ip地址,供测试用的,配置方法如下 一.打开httpd.conf 1.从Se ...

  9. 怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...

  10. javascript 面向对象(转)

    1.使用[]调用对象的属性和方法 function User() { this.age = 21; this.sex = "男?"; } var user = new User() ...