$(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. Kafka架构设计:分布式发布订阅消息系统

    [http://www.oschina.net/translate/kafka-design](较长:很详细的讲解) [我们为什么要搭建该系统]用作LinkedIn的活动流(activity stre ...

  2. C#以及Oracle中的上取整、下取整方法

    1.C#中: 上取整——Math.Ceiling(Double),即返回大于或等于指定双精度浮点数的最大整数(也可称为取天板值): eg:  Math.Ceiling(1.01)=2;      Ma ...

  3. C++的辅助工具介绍 [转]

    C++的辅助工具介绍 1 文档类  (1) Doxygen  参考站点:http://www.doxygen.org  Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和 ...

  4. JavaWeb-10(会话技术之session&amp;JSP)

    JavaWeb-会话技术之session&JSP 会话管理之Session技术 一.Session 在WEB开发中,server能够为每一个用户浏览器创建一个会话对象(session对象),注 ...

  5. 记录一下centos安装httpd+php+mysql的过程

    1.安装apache httpd 这个貌似安装完centos后自带了,如果没有,也可以用yum安装 yum -y install httpd 2.安装php yum -y install php ph ...

  6. SGU 531. Bonnie and Clyde 线段树

    531. Bonnie and Clyde 题目连接: http://acm.sgu.ru/problem.php?contest=0&problem=531 Description Bonn ...

  7. 【PAT】1029. Median (25)

    Given an increasing sequence S of N integers, the median is the number at the middle position. For e ...

  8. mysql中自己定义函数编程

    语法: 新建: Create function function_name(參数列表)returns返回值类型 函数体 函数名,应该合法的标识符,而且不应该与已有的keyword冲突. 一个函数应该属 ...

  9. JS同名方法,

    JS同名方法只会调用最后一个方法. JS中同时绑定多个事件,先绑定的先调用.后绑定的后调用.

  10. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...