highcharts高级画图柱状图和折线图
折线图一枚
$("#z_line").highcharts({
chart: {
type: 'line'
},
credits: {
enabled: false // 禁用版权信息
},
title: {
text: 0 //禁止标题显示
},
xAxis: {
categories: date //时间轴
},
yAxis: [{
lineWidth: 1,
title: {
text: '收益(元)'
}
}, {
title: {
text: '收盘价(元)'
},
lineWidth: 1,
opposite: true
}, {
title: {
text: '大盘'
},
lineWidth: 1,
opposite: true
}],
series: [{
data: dapan,
yAxis: 2,
name: '大盘',
color: "#9B59B6"
}, {
data: shoupan,
yAxis: 1,
name: '收盘价',
color: "#3498DB"
}, {
data: shouyi,
name: '收益(红盈利|绿亏损)',
color: "#E74C3C",
yAxis: 0,
zones: [{
value: 0,
color: '#2ECC71'
}]
}]
});
柱状图两两对比,分两组。
$('#zhu').highcharts({
chart: {
type: 'column'
},
legend: {
enabled: true
},
xAxis: {
categories: ['002131','002131','002131','002131','002131','002131','002131','002131','002131',
'002131','002131','002131','002131','002131','002131','002131','002131','002131',
'002131','002131']
},
plotOptions: {
series: {
allowPointSelect: true,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: '止损收益(红盈利|绿亏损)',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: "#ff0000",
zones: [{
value: 0,
color: '#2ECC71'
}]
},
{
name: '不止损收益(红盈利|绿亏损)',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, -54.4],
color: "#000",
zones: [{
value: 0,
color: '#2ECC71'
}]
},
]
});
两个图花了老夫好些时间,总算是满意了。
highcharts高级画图柱状图和折线图的更多相关文章
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)
import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...
- 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
- FusionCharts 2D柱状图和折线图的组合图调试错误
在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...
- FusionCharts 2D柱状图和折线图的组合图
1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...
- 使用jfreechart生成柱状图、折线图、和饼状图
JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...
- FusionCharts数据展示成饼状图、柱状图和折线图
FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...
随机推荐
- [实战篇入门]02-POI简单创建Excel
周日的小讲堂要讲到这里,趁中午时间写点东西,记录昨天晚上完成的东西,在这里只是简单的介绍如何创建对于样式问题,我不过多的说,因为之后的教程会使用模版方式搞定! 在学习这段代码的时候,希望各位访问Apa ...
- Linux(CentOS6.7) 安装MySql5.7数据库 图文教程
linux(CentOS6.7) 环境Mysql 5.7.17安装教程分享给大家,供大家参考,具体内容如下: 1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/ ...
- CCF-20170901
试题编号: 201709-1 试题名称: 打酱油 时间限制: 1.0s 内存限制: 256.0MB 问题描述 小明带着N元钱去买酱油.酱油10块钱一瓶,商家进行促销,每买3瓶送 ...
- java项目环境搭建
开发java项目时,由于涉及到版权问题,最好使用开源.免费的软件.比如eclipse. 此外,一个web的java项目涉及到jdk.tomcat等,插件还可能用到svn插件.maven插件. 建议进入 ...
- 51Nod 1002 数塔取数问题
Input示例 4 5 8 4 3 6 9 7 2 9 5 Output示例 28 DP: 递推式: dp[i][j]=max(dp[i+1][j],dp[i+1][j+1])+arr[i][j]; ...
- HDU 5876 Sparse Graph BFS+set删点
Problem Description In graph theory, the complement of a graph G is a graph H on the same vertices s ...
- [Luogu 2073] 送花
很容易想到的平衡树,加个维护区间和. 只需要插入和删除操作即可. kth其实都不用的,最小和最大可以从根节点log n一直向左/一直向右跑到叶子节点而求得. 记得每插入完一个点一定要更新区间和!!更新 ...
- Oracle数据库,忽略大小写Like模糊查询(SQL Server,MySql原理相同)
背景 在使用Oracle或者其它数据库时,使用like 关键字进行模糊查询是大家经常使用的功能,在纯中文环境中使用非常好用,还有一些通配符可以使用,但是在纯英文环境中,会出现大小需要精确匹配的问题,主 ...
- ASP.NET 设置DropDownList的当前选项
1.通过显示字符Text DropDownList.Items.FindByText("你的值").Selected=true; 如果在设置之前,进行过设置,应用如下格式: Dro ...
- Java线程总结(一)
首先,先贴上一个简单的线程实例: public class MyThread extends Thread{ @Override public void run(){ try { for (int i ...