HighCharts设置图表背景透明
其实就一句话:
backgroundColor: 'rgba(0,0,0,0)'
完整示例:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
还有另外一个属性,plotBackgroundColor: null
这个属性的意思是指图表部分,不含标题、说明信息,x轴y轴上的提示信息等部分的背景色,例如:
HighCharts设置图表背景透明的更多相关文章
- 设置UITableView背景透明/监听cell左边的删除按钮的点击事件
_tableView = [[UITableView alloc] init]; _tableView.delegate = self; _tableView.dataSource = self; _ ...
- 设置div背景透明的两种方法
实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...
- 设置div背景透明的CSS样式
div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...
- Android 设置按钮背景透明与半透明_图片背景透明
Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... /> 透明 ...
- 使用rgba设置输入框背景透明
项目中遇到要求输入框的背景设置透明度,但文字不受影响,如下图 输入框使用input标签 <input ref="searchText" type="search&q ...
- Duilib + wke 设置wke背景透明
WkeWebKit.cpp 新增 wkeSetTransparent(m_pWebView, true); void CWkeWebkitUI::DoInit() { CControlUI::DoIn ...
- Android 代码设置Activity 背景透明
当指定Activity 样式 Them.Dialog 时候 又不同意用XML 设置 Activity 的背景颜色的时候 用代码 this.getWindow().getDecorView().setB ...
- 设置groupBox背景透明
步骤:属性-BackColor-WEB面板-Transparent
- 设置iframe背景透明
<iframe allowtransparency="true" src="page.htm" frameborder="0" > ...
随机推荐
- C#如何直接调用非托管代码
C#如何直接调用非托管代码,通常有2种方法: 1. 直接调用从 DLL 导出的函数. 2. 调用 COM 对象上的接口方法 我主要讨论从dll中导出函数,基本步骤如下: 1.使用 C# 关键字 s ...
- 在eclipse中查看Android源码
声明:高手跳过此文章 当我们在eclipse中开发android程序的时候.往往须要看源码(可能是出于好奇,可能是读源码习惯),那么怎样查看Android源码呢? 比方以下这样的情况 图1 如果我们想 ...
- C# Windows服务开发从入门到精通
一.课程介绍 大家都知道如果想要程序一直运行在windows服务器上,最好是把程序写成windows服务程序:这样程序会随着系统的自动启动而启动,自动关闭而关闭,不需要用户直接登录,直接开机就可以启动 ...
- ASP.NET Web API接受AngualrJS的QueryString的两种方式
ASP.NET Web API如何接受来自AngualrJS的QueryString呢?本篇体验两种方式. 第一种方式:http://localhost:49705/api/products?sear ...
- 在ASP.NET MVC下实现树形导航菜单
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...
- C#编程(六十六)----------表达式树总结
表达式树总结 基础 表达式树提供了一个将可执行代码转换成数据的方法.如果你要在执行代码之前修改或转换此代码,那么它是很有用的.有其是当你要将C#代码----如LINQ查询表达式转换成其他代码在另一个程 ...
- WordPress主题开发实例:查询单篇文章
xxx/?page_id=5 想在首页调用以上页面的内容怎么做呢? 完整: <?php //查询 $my_query = new WP_Query( 'page_id=5' ); if($my_ ...
- ASP.NET MVC:Form Authentication 相关的学习资源
看完此图就懂了 看完下面文章必须精通 Form authentication and authorization in ASP.NET Explained: Forms Authentication ...
- ios之网络异常与正常视图的切换
1. xib中创建两个View 2. View的视图大概如下第一个:View View 第二个:View 3. 代码切换: [self.view addSubview:_redView]; // 会 ...
- Shape画圆形控件
这里涉及到shape的运用,这仅仅是一个实例 circle.xml <?xml version="1.0" encoding="utf-8"?> & ...