多个图表的Highchart背景颜色仅适用于一个图表
Highcharts backgroundColor for multiple charts is only applied to one chart
以下示例位于jsfiddle,带有以下链接。 http://jsfiddle.net/KWqU2/2/
两个高图表在图表选项配置中都设置了背景颜色。
问题似乎是,无论我将 backgroundColor 属性设置为什么,第二个图表默认为默认值并忽略我指定的任何设置。 我的目标是让两个图表背景透明。 我已经尝试了背景颜色:空,背景颜色:"透明",背景颜色:'rgba(255,255,255,0.1)"似乎没有任何效果。
任何想法将不胜感激。
下面是两个图表的代码:
var chart;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
backgroundColor:'#000000',
size:'100%'
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 1],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
var chart2;
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
legend:{
enabled: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 3],
['Opposes You', 10],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
你做错了,chart2
不是一种选择。更改此内容:
$('#container2').highcharts({
chart2: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
对此:
$('#container2').highcharts({
chart: {
backgroundColor:'Transparent',
size:'100%'
},
...
});
查看更新的 jsFiddle
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- 关闭当前选项卡并打开一个新的-仅适用于Chrome
- 如何在一个适用于HTML5的TeeChart中绘制堆叠和普通系列
- 提交了一个PDF格式的PHP脚本只适用于Adobe阅读器XI
- 有没有一个简单的 html 网络服务器适用于 mac
- 两个几乎相等的jQuery函数;一个适用于IE,一个不适用于IE
- 如何创建一个“;加载程序文件“;适用于angularjs+requirejs的控制器
- I'我正试图用javascript打开一个弹出窗口.它适用于Chrome,但不适用于IE或Firefox
- 在某个位置添加一个javascript脚本标记,以便它适用于sphinx文档中的每个文件
- 将鼠标悬停在表上,用jquery更改另一个元素样式,只适用于1毫秒
- 有可能制作一个按钮'添加到主屏幕'适用于iphone
- 适用于Chrome,但不适用于Safari——这是一个隐藏的DIV,只在提交带有所有必需字段的表单时显示
- 将文本字段限制为一个小数点输入(代码适用于Safari,但不适用于Firefox)
- 是否有一个同时适用于iOS和Android的原生控件javascript框架?
- 是否有办法在现有窗口中打开一个新窗口(适用于onload=)
- 如何在firefox中动态点击一个href链接?预期的方法只适用于IE
- initKeyEvent按键仅适用于FireFox.需要一个跨浏览器的解决方案
- 我有一个名为remove()的自定义js函数,它适用于除chrome之外的所有浏览器
- 如何使用适用于 Node.js 的 AWS 开发工具包将 Amazon S3 中的所有对象从一个前缀复制/移动到另一个前
- d3.js:当只想比较HH:MM时,是一个适用于x轴的时间刻度