highcharts设置Area颜色透明度

时间:2021-11-08 10:04:23
$(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颜色透明度的更多相关文章

  1. 20190614笔记(颜色透明度&comma;css&comma;filter&comma;滤镜&comma;计算属性&comma;json和formData转换)

    今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...

  2. 【代码笔记】iOS-UITextField设置placeholder颜色

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  3. ubuntu 终端设置(颜色与长路径)

    Linux给人最大的享受就是可以根据个人喜好去定制令自己舒服的系统配置,像终端颜色的设置就是一个典型的例子. 图1 系统默认状态下的终端显示     在没有经过自定义配置的终端下工作久了,难免容易疲劳 ...

  4. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

  5. Android 之计算控件颜色透明度

    Android 之计算控件颜色透明度 1.UI会给一个数值,例如:#EFE000,透明度30% 2.用255乘以30%等于76.5,然后四舍五入等于77 3.用计算器将十进制的77转成十六进制的数据为 ...

  6. iOS 7 UITableview 在Plain模式下 设置背景颜色无效

    在iOS6的时候,设置Plain模式下table的颜色 通过[self.table setBackgroundColor:[UIColor red]]; 就可以看到一个满身通红的tableView 但 ...

  7. Aspose&period;Cells 设置背景颜色

    很多小伙伴设置背景颜色都不起作用,特别提醒需要加入下面一行: style.Pattern = BackgroundType.Solid; Aspose.Cells.Style style = null ...

  8. intellij IDEA15 设置背景颜色

    File--> Settings 2. Appearance & Behavior --> Appearance 设置边框背景颜色 3. Editor --> Colors ...

  9. 一行代码设置TForm颜色的前世今生(属性赋值引起函数调用,然后发消息实现改变显示效果),TForm的初始颜色在dfm中设置了clBtnFace色

    来自万一的帖子:http://www.cnblogs.com/del/archive/2008/04/27/1173658.html的确做到了一行代码设置TForm控件的颜色(一点感想:Delphi程 ...

随机推荐

  1. ListIterator接口,双向输出。

    1,ListIterator接口与Itreator接口的区别. 2,使用限制. 定义如下: public interface ListIterator<E>extends Iterator ...

  2. WebForm Repeater使用

    Repeater: HeaderTemplate: 在加载开始执行一遍 ItemTemplate : 有多少条数据,执行多少遍 FooterTemplate :在加载最后执行一遍 Alternatin ...

  3. 学习OpenCV——KNN算法

    转自:http://blog.csdn.net/lyflower/article/details/1728642 文本分类中KNN算法,该方法的思路非常简单直观:如果一个样本在特征空间中的k个最相似( ...

  4. Python零基础学习系列之二--Python介绍及环境搭建

    1-1.Python简介: Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.像P ...

  5. 【liferay】2、可配置portlet

    定义:edit和config模式一般没有使用,对于使用editor和config等模式的portlet,我们可以将他们称为可配置portlet. 我们先新建一个portlet项 添加可配置的控制元素, ...

  6. FORTH基本堆栈操作

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  7. vue小白快速入门

    一.vue是什么 Vue 是一套用于构建用户界面的渐进式框架. 压缩后仅有17kb 二.vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. 但在用 ...

  8. day07数据类型的相互转化,字符编码

    复习 ''' 1.深浅拷贝 ls = [1, 'a', [10]] 值拷贝:直接赋值 ls1 = ls, ls中的任何值发生改变,ls1中的值都会随之改变 浅拷贝:通过copy()方法 ls2 = l ...

  9. 2018-2019-2 20165313 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容. (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测. ...

  10. 036&lowbar;lua应用扩展

    一.request_id定义 ## # request id ## lua_package_path '/opt/nginx/conf/lua/lib/?.lua'; init_by_lua ' uu ...