$(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笔记(颜色透明度,css,filter,滤镜,计算属性,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.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. vs2013修改默认的开发环境

    可能会有朋友和我一样,当安装完VS完成之后,没有选择默认的开发模板,在后面添加新项目时,总是不能选择默认的开发语言,下面给出个简单步骤,记录一下以备用. 看图吧 1.工具>导入和导出设置 2.选 ...

  2. 哈希表(Hash)的应用

    $hs=@() #定义数组 $hs=@{} #定义Hash表,使用哈希表的键可以直接访问对应的值,如 $hs["王五"] 或者 $hs.王五 的值为 75 $hs=@''@ #定义 ...

  3. 11个新鲜出炉的jQuery图像滑块插件

    如今图像滑块已成为一种流行的Web设计元素,通过滑块,你可以在有限的页面空间中展示更多的内容,带给用户更佳的浏览体验.本文将为你带来一些非常实用的jQuery图像滑块插件. 1.  Basic Sli ...

  4. 一个jQuery扩展工具包

    带有详尽注释的源代码: var jQuery = jQuery || {}; // TODO // ###################################string操作相关函数### ...

  5. Codeforces Round #309 (Div. 2) B. Ohana Cleans Up 字符串水题

    B. Ohana Cleans Up Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/554/pr ...

  6. C#的WinForm中制作饼状图和柱状图

    using System; using System.IO;//用于文件存取 using System.Data;//用于数据访问 using System.Drawing;//提供画GDI+图形的基 ...

  7. hdu4085 Peach Blossom Spring 斯坦纳树,状态dp

    (1)集合中元素表示(1<<i), i从0开始 (2)注意dp[i][ss] = min(dp[i][ss], dp[i][rr | s[i]] + dp[i][(ss ^ rr) | s ...

  8. LFS7.4编译笔记(2)

    上一篇我们已经搭建好了临时系统,这一篇我们就开始正式构建我们的最终LFS系统. 首先切换到root,准备虚拟内核文件系统并挂载: su - export LFS=/mnt/lfs mkdir -pv ...

  9. LINUX内核笔记

    http://blog.chinaunix.net/uid/27119491/list/1.html?cid=161103

  10. Ubuntu下VSFTPD(六)(常见FTP命令及其功能) (

    常见FTP命令及其功能  FTP 命令 功能  FTP 命令 功能  ls 显示服务器上的目录 ls [remote-dir][local-file] 显示远程目录remote-dir,并存入本地文件 ...