HighCharts绘制图表
<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绘制图表的更多相关文章
- 使用highcharts 绘制Web图表
问题描述: 使用highcharts 绘制Web图表 Highcharts说明: 问题解决: (1)安装Highcharts 在这些图表中,数据源是一个典型的JavaScrip ...
- Highcharts使用CSV格式数据绘制图表
Highcharts使用CSV格式数据绘制图表 CSV(Comma-Separated Values,逗号分隔值文本格式)是採用逗号切割的纯文本数据.通常情况下.每一个数据之间使用逗号切割,几个相关数 ...
- Highcharts使用表格数据绘制图表
Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...
- 使用highcharts绘制美观的燃尽图
使用highcharts绘制美观的燃尽图 助教在博客中介绍了两种绘制燃尽图的方法,但是我们组在使用时发现有些任务不适合写进issue,而且网站生成的燃尽图不是很美观,因此我们打算使用其他方法自己绘制燃 ...
- 使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法
工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档: highcharts: ...
- DWR(AJAX)+Highcharts绘制曲线图,饼图
基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...
- 使用D3绘制图表(7)--饼状图
这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...
- 使用Highcharts实现图表展示
本篇随笔记录的是本人2011年做广州地铁协同办公项目时,图表需求的解决方案.(Demo中只是虚拟的测试数据) 关键技术点: 使用Highcharts实现图表展示: 另外使用Highslide弹窗.使用 ...
- 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)
此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...
随机推荐
- Node.js的核心与红利(zz)
唯有明晰历史,才能了然当下,预知未来.作者从历史角度解读Node.js,帮助读者透过猜忌和谣言,看清真实的Node.js,了解Node.js的核心与红利. 令人惴惴不安的Node.js 我们越来越频繁 ...
- Adobe CS6 全系列官方下载地址 (迅雷无效) Win Mac
https://helpx.adobe.com/x-productkb/policy-pricing/cs6-product-downloads.html CS6 Design & Web P ...
- AngularJS语法格式小结
//创建一个最大的容器,"唯一的名字" []数组 var a=angular.module("abcd",[]); //控制器 a.controller(&qu ...
- Android – 学习操作NFC – 2
在<Android – 学习操作NFC – 1>说明了Android在处理NFC tag的机制.tag dispatch system的运作流程,以及三种ACTION_NDEF_DISCO ...
- Java位运算符
& 两个二进制数的相同位比较,都为1,结果为1,否则结果为0. | 两个二进制数的相同位比较,只要有一个为1,结果就为1,否则为0. ~ 对一个二进制数的每一位取反,原值为1,取反为0,原值为 ...
- session跟cookies区别
Session和Cookie的使用总结: Session和cookie都是asp.Net中的内置对象,至于他们有什么区别,在这里就不在多说,现在来说说一些比较实用点的东西: 我们知道网站都有一个后台管 ...
- python日志模块
许多应用程序中都会有日志模块,用于记录系统在运行过程中的一些关键信息,以便于对系 统的运行状况进行跟踪.在.NET平台中,有非常著名的第三方开源日志组件log4net,c++中,有人们熟悉的log4c ...
- 161216、使用spring的DefaultResourceLoader自定义properties文件加载工具类
import java.io.IOException; import java.io.InputStream; import java.util.NoSuchElementException; imp ...
- POJ 1113:Wall
原文链接:https://www.dreamwings.cn/poj1113/2832.html Wall Time Limit: 1000MS Memory Limit: 10000K Tota ...
- python基础(三元运算+深浅拷贝+函数参数)
三元运算 三元运算,又称三目运算,主要作用是减少代码量,是对简单的条件语句的缩写. 书写格式: result = 值1 if 条件 else 值2 即如果条件成立,则将值1赋给result变量,如果不 ...