折线图一枚

$("#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高级画图柱状图和折线图的更多相关文章

  1. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  2. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  3. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  4. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  5. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

  6. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  7. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  8. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  9. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

随机推荐

  1. noip模拟赛 helloworld

    分析:对于第一个点,答案为26^n - 25^n,这个很好想.另外30%的点因为n <= 5,所以可以直接暴力搜索. 数学方法不是很好处理,考虑dp,设f[i][j]为前i位匹配到危险串第j位的 ...

  2. Activity-ListView

    在手机中经常有列表方式.如果Activity中只有唯一一个List(这也是通常的情况),可以继承ListActivity来实现.我们用两个例子来学习List. List例子一:利用Android自带的 ...

  3. 11.nginx upload module + python django 后台 实现视频上传与切片

    1.需求:支持视频上传并切片,支持通过m3u8文件播放 2.视频切片的上一节已经谈过,这一节主要是视频上传的处理 第一步:upload-module模块安装 -----------首先下载upload ...

  4. CentOS查看系统版本号

    命令:cat /etc/redhat-release [elsearch@localhost data]$ cat /etc/redhat-release Red Hat Enterprise Lin ...

  5. Sass 基本特性-基础 笔记

    一.变量声明 $ 变量的声明使用 $  所有的变量必须声明到变量调用之前 从3.4版本开始,Sass已经可以正确处理作用域的概念     在局部范围声明一个已经存在于全局内的变量时,局部变量就会成为全 ...

  6. Vuejs - 组件式开发

    初识组件 组件(Component)绝对是 Vue 最强大的功能之一.它可以扩展HTML元素,封装可复用代码.从较高层面讲,可以理解组件为自定义的HTML元素,Vue 的编译器为它添加了特殊强大的功能 ...

  7. webpack自动生成项目的html

    1 自动生成多个html页面 设置webpack.config.js中的plugins属性,多次调用plugin插件(new htmlWebpackPlugin()),同时设置对应数量的.js入口文件 ...

  8. AlertDialog.Builder 显示为白色 蓝色字

    AlertDialog.Builder dialog = new AlertDialog.Builder( getActivity(),AlertDialog.THEME_HOLO_LIGHT);

  9. Java的9种基本数据类型的大小,以及他们的封装类

    由于java程序是运行在虚拟机之上的,所以java的基本数据类型的大小是确定的,不会随着操作系统的位数的改变而改变. 在计算机中,存储的是0,1,0,1这样的二进制位,表示为bit,1Byte = 8 ...

  10. 【转】C++多继承的细节

    这几天写的程序应用到多继承. 以前对多继承的概念非常清晰,可是很久没用就有点模糊了.重新研究一下,“刷新”下记忆. 假设我们有下面的代码: #include <stdio.h> class ...