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 ...
随机推荐
- 使用feign调用服务的时候注意的问题
服务端 rest api @RequestMapping(value = "/phone") public ResponsePhone getPhone(@RequestParam ...
- CSS3 :empty 选择器
这可是个好东西,我也是这个星期才发现的,下面我们来说具体功能. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- 百度地图定位API,精度提高
我使用百度定位API DEMO上面好像就可以setCoorType("bd09ll");//百度地图坐标. 然后我找了下从其它坐标体系迁移到百度坐标. 问下: 1.那我还能不能在百 ...
- IE8动态创建CSS
IE8动态创建CSS 最近在项目中用到在页面中动态创建CSS方法,记录一下方便以后查看 一. 在IE下动态创建(网上收集3种方法,最后一个方法未测试成功,具体不知道什么原因) 第一种(此方法很麻烦,需 ...
- 2015/9/2 Python基础(7):元组
为什么要创造一个和列表差别不大的容器类型?元组和列表看起来不同的一点是元组用圆括号而列表用方括号.而最重要的是,元组是不可变类型.这就保证了元组的安全性.创造元组给它赋值和列表完全一样.除了一个元素的 ...
- 2015/8/26 Python基础(1):基本规则及赋值
Python有如下的基本规则: #后表示注释 \n是行分隔符 \是继续上一行,将过长语句分开 :分号将两个语句连接在一行中 :冒号将代码头和体分开 代码块用缩进块的方式体现 不同缩进深度分隔不同的代码 ...
- [Luogu 1168] 中位数
中位数可以转化为区间第k大问题,当然是选择Treap实现名次树了啊.(笑) 功能十分简单的Treap即能满足需求--只需要插入与查找第大的功能. 插入第i个数时,如果i是奇数,随即询问当前排名第(i+ ...
- SpringBoot jar包不支持jsp
官方原文如下: When running a Spring Boot application that uses an embedded servlet container (and is packa ...
- 【51NOD-5】1293 球与切换器
[算法]DP [题解]f[i][j][0]表示在i,j位置往下走的球数,f[i][j][1]表示在i,j位置往右走的球数,经过i,j的球若为-1则(num+1)/2往下,其余往右.+1类似. 转移见代 ...
- 【HDU】2222 Keywords Search
[算法]AC自动机 [题解]本题注意题意是多少关键字能匹配而不是能匹配多少次,以及可能有重复单词. 询问时AC自动机与KMP最大的区别是因为建立了trie,所以对于目标串T与自动机串是否匹配只需要直接 ...