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 ...
随机推荐
- bzoj 1520 [POI2006]Szk-Schools 费用流
[POI2006]Szk-Schools Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 743 Solved: 381[Submit][Status][ ...
- 超酷算法-BK树
前几天无意间遇到一个博客,觉得写得挺好的,自己之前的时候有个不好的习惯,那就是遇到了好资源第一反应就是收藏起来然后却很少再看!!这是坏习惯,要改!于是今天就开始通读了,读的第二篇是BK树.觉得有点意思 ...
- RDLC - 后台代码直接导出Excel/PDF/Word格式
最近做报表功能,用到了.net的报表组件rdlc. 其中有个功能就是后台代码直接输出Excel/PDF/Word格式的文件,网上看了些资源,做个总结: 参考地址 我直接贴出代码: //自动导出exce ...
- javascript拖拽原理与简单实现方法[demo]
美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”.可是轮子早已问世,再要去发明岂非劳而无功? 产品经理发下需求,实施者再到网上搜索代码,也许 ...
- 【51NOD-0】1018 排序
[算法]排序 #include<cstdio> #include<algorithm> using namespace std; ]; int main() { scanf(& ...
- Cordova入门
创建你的第一个App 因为对接要对接酷音,实现h5跨平台调用客户端的保存和分享功能,所以学了下cordova的入门. 安装Cordova CLI Cordova命令行工具作为npm包分发. 安装cor ...
- 分布式实时日志分析解决方案ELK部署架构
一.概述 ELK 已经成为目前最流行的集中式日志解决方案,它主要是由Beats.Logstash.Elasticsearch.Kibana等组件组成,来共同完成实时日志的收集,存储,展示等一站式的解决 ...
- Windows平台下搭建Git服务器的图文教程
Git没有客户端服务器端的概念,但是要共享Git仓库,就需要用到SSH协议(FTP , HTTPS , SFTP等协议也能实现Git共享,此文档不讨论),但是SSH有客户端服务器端,所以在window ...
- Java中class的初始化顺序
由于Java 中的一切东西都是对象,所以许多活动 变得更加简单,这个问题便是其中的一例. 除非真的需要代码,否则那个文件是不会载入的.通常,我们可认为除非那个类的一个对象构造完毕, 否则代码不会真 ...
- Tomcat8配置默认项目
<!-- 配置默认访问项目 --> <Host name="localhost" appBase="webapps" unpackWARs=& ...