highcharts设置Area颜色透明度
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
//主要是通过 plotOptions 来设置区域显示
plotOptions: {
area:{
color:'#0055cc'
},
//设置区域的透明度 fillOpacity: num 最大为1
series: {
fillOpacity: 0.3
}
},
series: [{
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],
}]
});
});
//项目实例
$(function () {
Highcharts.setOptions({
colors: ['#CCCCCC', '#1ab394']
});
$('#container').highcharts({
credits: {
enabled: false // 禁用版权信息
},
chart: {
renderTo: 'chart'
},
title: { text:'赛轮光伏电站发电量监控图'},xAxis: { categories:['2016-04-06','2016-04-01','2016-04-02','2016-04-03','2016-04-04','2016-04-05']},
yAxis: {
title: {
text: 'kWh'
}
},
legend: { //【图例】位置样式
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: ,
shadow: true
},
plotOptions: {
area: {
//设置图表透明度为 0.2
fillOpacity: 0.2,
//设置线段的宽度为 0
lineWidth: ,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius:
}
}
},
shadow: false,
states: {
hover: {
lineWidth:
}
},
threshold: null
},
scatter: {
marker: {
symbol: 'triangle-down'
}
}
},series: [
{
name: '发电量90%-115%',
data: [,,,,,], type: 'area',
color: 'rgba(0,148,48,1)',
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y} kWh',
}
},
{
name: '发电量70%-90%',
data: [12910.63,12744.5,8039.63,6637.14,12327.33,12178.66], type: 'area',
color: 'rgba(230,193,78,1)',
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y} kWh',
}
},
{
name: '发电量0%-70%',
data: [10041.6,9912.39,6253.05,5162.22,9587.92,9472.29,], type: 'area',
color: 'rgba(211,2,5,1)',
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y} kWh',
}
},
{
name: '模拟发电量',
data: [22069.46,21785.46,13742.96,11345.54,21072.36,20818.23],marker: {symbol:'triangle-down'}, type: 'scatter',
color: '#d57e1f',
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y} kWh',
}
},
{
name: '发电量',
data:[{color:'rgba(236,27,30,1)','y':},{color:'rgba(236,27,30,1)','y':9373.7},{color:'rgba(236,27,30,1)','y':4161.79},{color:'rgba(236,27,30,1)','y':4138.98},{color:'rgba(236,27,30,1)','y':8364.81},{color:'rgba(236,27,30,1)','y':8217.1}], type: 'column',
showInLegend: false,
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y} kWh',
}
}
]
})
});
highcharts设置Area颜色透明度的更多相关文章
- 20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)
今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...
- 【代码笔记】iOS-UITextField设置placeholder颜色
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- ubuntu 终端设置(颜色与长路径)
Linux给人最大的享受就是可以根据个人喜好去定制令自己舒服的系统配置,像终端颜色的设置就是一个典型的例子. 图1 系统默认状态下的终端显示 在没有经过自定义配置的终端下工作久了,难免容易疲劳 ...
- Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片
设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...
- Android 之计算控件颜色透明度
Android 之计算控件颜色透明度 1.UI会给一个数值,例如:#EFE000,透明度30% 2.用255乘以30%等于76.5,然后四舍五入等于77 3.用计算器将十进制的77转成十六进制的数据为 ...
- iOS 7 UITableview 在Plain模式下 设置背景颜色无效
在iOS6的时候,设置Plain模式下table的颜色 通过[self.table setBackgroundColor:[UIColor red]]; 就可以看到一个满身通红的tableView 但 ...
- Aspose.Cells 设置背景颜色
很多小伙伴设置背景颜色都不起作用,特别提醒需要加入下面一行: style.Pattern = BackgroundType.Solid; Aspose.Cells.Style style = null ...
- intellij IDEA15 设置背景颜色
File--> Settings 2. Appearance & Behavior --> Appearance 设置边框背景颜色 3. Editor --> Colors ...
- 一行代码设置TForm颜色的前世今生(属性赋值引起函数调用,然后发消息实现改变显示效果),TForm的初始颜色在dfm中设置了clBtnFace色
来自万一的帖子:http://www.cnblogs.com/del/archive/2008/04/27/1173658.html的确做到了一行代码设置TForm控件的颜色(一点感想:Delphi程 ...
随机推荐
- Spring+Struts+Ibatis的配置
指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> < ...
- 第七届ACM趣味程序设计竞赛第四场(正式赛) 题解
Final Pan's prime numbers 题目连接: http://acm.uestc.edu.cn/#/problem/show/1272 题意 给你n,要求你在[4,n]范围内找到一个最 ...
- kickstart一键自动安装Linux系统
kickstart,无人值守,自动安装系统.本文介绍kickstart的用法. #安装系统的信息——可以参考 [root@larrywen pdf]# vim ~/anaconda-ks.cfg 第一 ...
- phpmyadmi 上传大文件
最近自己想通过phpmyadmin上传大的文件,找了很多方法都没搞定,今天特意静下心来,终于搞定了. 需求:将480M大小的sql文件通过phpmyadmin进行导入 1.首先修改php.ini文件, ...
- //判断是否安装Flash插件
//判断是否安装Flash插件 var swf; function IE_Flash() { try { var swf ...
- android仿win8 metro磁贴布局
代码下载 //更新代码, 这里是更新后的代码 //////////////////////// 1,含一个图片无限滚动的控件,自己实现的 2.可新增删除每个磁贴 3.来个图片吧 ////* ...
- 【Backbone】简介
1.Model 2.Collection 3.View 4.Router 5.History 6.Events http://addyosmani.github.io/backbone-fundame ...
- 浏览器中打开IOS应用并传参
原创文章,转载请注明 开发中遇到这么一个问题,就是动态地指定联接服务器地址,或其它数据.如果是其它数据还好说一些,可以通过在服务器上获得的方式来弄.但如果服务器地址都需要动态指定的话.那就得另想办法了 ...
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- ubuntu搭建LAMP服务器
新手记录下...... 安装apache apt-get install apache2 安装mysql apt-get install mysql-server 安装php apt-get inst ...