$(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. (剑指Offer)面试题23:从上到下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 很明显,这是一个广度优先遍历. 需要一个队列容器来保存结点,具体操作: 1.将根结点压入队列中,并打印根结点:如果根结点有子结点 ...

  2. php 将字符串中的连续多个空格转换为一个空格

    转载自:http://www.phpernote.com/php-function/633.html /** * 多个连续空格只保留一个 * * @param string $string 待转换的字 ...

  3. oracle 创建同义词

    1.语法: 同义词 (SYNONMY) CREATE SYNONYM同义词名FOR 表名; CREATE SYNONYM同义词名FOR 表名@数据库链接名; Create synonym synony ...

  4. 系列文章--SharePoint 开发教程

    SharePoint 2013 图文开发系列之入门教程 学习地址:http://www.cnblogs.com/jianyus/p/3461719.html 里面有2007.2010.2013各个版本 ...

  5. vim复制多行<转>

    比如我要复制从第1行到第5行的数据,复制到第9行 光标移到第5行任意位置,输入ma光标移到第1行任意位置,输入y'a(这一定要打这个“'”单引号,否则就进入“INSERT”状态了光标移到需要复制的行, ...

  6. 05_android入门_GET方式实现登陆(在控件上显示服务端返回的内容)

    当点击登陆之后,怎么把server端返回的数据,写到指定的控件上尼?,在android怎么实现尼?以下我们通过详细的代码进行分析和实现,希望能对你,在学习android知识上有所帮助. 以下通过代码说 ...

  7. 试读《JavaScript语言精髓与编程实践》

    有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...

  8. java学习笔记(3)——面向对象

    this关键字 this是当前对象的引用,是运行期间当前对象本身. 可以使用this明确的访问当前对象的属性或者方法,类似于“我” this()可以调用本类的其他构造器,可以使用构造器的重用简化代码的 ...

  9. openlayers3 在地图上叠加WFS查询矢量图层

    随着终端设备计算能力的加强,用户在使用地图的时候也须要越来越多的交互效果. 比方如今非常火的室内导航,为了获得好的用户体验,就须要当用户单击某一商店的时候该商店的颜色能对应的变化.这就须要叠加矢量图层 ...

  10. 通达OA 公共文件柜二次开发添加管理信息(图文)

    公共文件柜当内容较多时,管理起来非常easy乱,特别是当有多个名字相近的目录时.这里通过简单的开发添加了两个管理信息,能够通过添加备注的方式加以区分. watermark/2/text/aHR0cDo ...