- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想出了一个 highchart gauge 代码,它在 JSFiddle 上呈现得非常好,但是当我将它复制/粘贴到我的网站时,似乎所有“边框”选项(borderColor 和 borderWidth)都没有响应,并且浏览器自动在我的系列、工具提示和仪表的几个背景半径上放置白色边框,这是我不想要的,这不仅视觉效果不佳,而且使系列无法清晰显示!
这是 JSFiddle:https://jsfiddle.net/roamdam/p67ebL0L/6/
var legend1 = "<span style='font-weight:100'>Un peu</span>",
legend2 = "<span style='font-weight:100'>Beaucoup</span>",
legend3 = "<span style='font-weight:100'>Pas du <br/>tout</span>";
$(function () {
// Uncomment to style it like Apple Watch
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'none'
},
colors: ['#CBA148', '#0092B9', '#107671']
});
}
//
Highcharts.chart('gauge', {
chart: {
type: 'solidgauge',
marginTop: 0
},
title: {
text: '',
},
tooltip: {
borderWidth : 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '15px',
fontFamily: 'Gill Sans'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 150
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for 'un peu H'
outerRadius: '112%',
innerRadius: '100%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth:0,
}, { // Track for 'un peu F'
outerRadius: '100%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth:0,
}, { // Track for Beaucoup H
outerRadius: '87%',
innerRadius: '75%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth:0,
}, { // Track for Beaucoup F
outerRadius: '75%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Pas du tout H
outerRadius: '62%',
innerRadius: '50%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Pas du tou F
outerRadius: '50%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 60,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: 17,
dataLabels: {
enabled: false
},
linecap : 'round',
stickyTracking: false
}
},
series: [{
name: '(hommes) <br/><b>Un peu :</b>',
borderColor:Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '106%',
innerRadius: '106%',
y: 40
}]
}, {
name: '(femmes) <br/><b>Un peu :</b>',
borderColor:Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '94%',
innerRadius: '94%',
y: 51
}]
} , {
name: '(hommes) <br/><b>Beaucoup :</b>',
borderColor:Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '81%',
innerRadius: '81%',
y: 49
}]
}, {
name: '(femmes) <br/><b>Beaucoup :</b>',
borderColor:Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '69%',
innerRadius: '69%',
y: 36
}]
} , {
name: '(hommes) <br/><b>Pas du tout :</b>',
borderColor:Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '56%',
innerRadius: '56%',
y: 11
}]
}, {
name: '(femmes) <br/><b>Pas du tout :</b>',
borderColor:Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '44%',
innerRadius: '44%',
y: 15
}]
}]
},
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback() {
// Move icon
this.renderer.text(legend1, -55, 5)
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 0,
'zIndex': 10
})
.translate(190, 26)
.add(this.series[2].group);
// Exercise icon
this.renderer.text(legend2, -65, 10)
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 0,
'zIndex': 10
})
.translate(190, 61)
.add(this.series[2].group);
// Stand icon
this.renderer.text(legend3,-50,5)
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 0,
'zIndex': 10
})
.translate(190, 96)
.add(this.series[2].group);
});
});
附件是a capture of what the code renders on my page (浏览器:Safari,但在 Firefox 上也是如此)。会不会是浏览器的问题?
最佳答案
您很可能在您的站点上更改了 plotOptions solidgauge、borderWidth 字段,这可能与您想象的不一样。那些漂亮的彩色圆线实际上不是系列线,它们是系列线的边框。您在网站上看到的白线是无边框的系列线。
关于javascript - HIghcharts 衡量不需要的白色边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36087258/
对于我正在使用的启动画面: setContentView(R.layout.activity_home); new Handler().postDelayed(new Runnable() {
这是我的问题。我有一个应用程序,它打开一个文件打开对话框,我试图将文件路径和文件名输入到“文件名:”组合框部分。 应用程序加载了您登录的表单。这将打开另一个表单,其中有许多按钮。选择其中一个按钮会打开
我正在使用 sjPlot 的 plot_model() 绘制回归模型。我想将我的线条颜色从 sjPlot 主题(红色和蓝色线条)更改为黑白或灰度。但是,当我使用 set_theme(theme_bw(
所以看起来SpriteMaterial的默认颜色是0xFFFFFF。这似乎意味着 Sprite 没有颜色。如果我将 Material 的颜色属性更改为 0xFF0000, Sprite 将显示为红色。
我需要在文档中找到最大的空白区域,并使用python在其中放置QR码,以显示其坐标,中心点和区域。 我认为OpenCV和Numpy应该足以完成此任务。 使用什么样的THRESH?由于扫描类型很多: 灰
Android 选项卡上的波纹效果默认为白色。我想在 tablayout 上添加波纹效果,但我的选项卡背景已经是白色的,并且波纹效果在其上不可见。 有没有办法改变 tabLayout 波纹效果的颜
我正在尝试在我的应用程序上显示一个基本的谷歌地图,但它不起作用,它显示一个白屏,即使我有网络连接,我也检查了我的 MANEFIST 一百次,我生成了一个 deubg key ,并确定它是是的 我想是否
我有一个带有框阴影的蓝色框,文本颜色为白色,如下所示: . 是否可以添加内阴影?喜欢this (jsfiddle)?它不适用于白色文本,就像我的示例一样。 body { /* This has t
这是我的代码: body{ background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat
我已经从 w3school 实现了一个 slider 。我还从另一个例子中实现了这些点来跟踪幻灯片。如果我单击它们,它们工作正常,问题是我无法使当前/事件点(从实际位置的幻灯片)显示为纯白色,让你知道
我是 bootstrap 的新手,试图提高我的技能,我已经制作了 5 个盒子,如您所见(左侧两个,右侧 3 个),我的问题是为什么盒子编号“5”看起来不同,而不是相应的与数字 2 和 4 不在同一行,
我一直在研究一种导航,它会在滚动过标题后获得不透明度并缩小 Logo - 一切都很好,除了当导航栏覆盖白色背景上的段落时,它会变成透明并造成视觉困惑.我猜这可能是使用 rgba 的问题?我想保持不透明
有一个关于名为 Rockwell Std Light 的字体的问题。我在 Photoshop 中用蓝色背景显示白色文本,在 Dreamweaver 中也做了同样的事情。但是,网页中的字体总是看起来比较
我正在创建一个应用程序,它会在某个时候打开照片库。问题是照片库中的状态栏是黑色透明的,而我想要一个默认的应用程序(纯白色)。有什么办法可以改变它..? 我想补充一点,我试过这个:iOS SDK - H
我正在尝试使用 AForge.NET 来检测图像中的粗白线。 这就像我得到的管道一样,是应用阈值过滤器后我想要的结果。 我知道如何检测形状并且我已经在这样做了,但是这在任何形状下都不匹配,因为它没有边
我正在尝试让 Tabs 在 Android 上通过 compose 与 TabRow 一起使用。我想要的是 TabRow 有白色背景。 如文档 (https://developer.android.c
我已经为我的 Visual Studio 安装了最新的 WiX(安装程序),当我想设置图标时,它总是以空白结束。我正在尝试设置“所有 Windows 软件”中条目的图标 在下面的图片中你可以看到图标的
为什么选择后微调器文本会变成空白? 如果我使用 getActivity().recreate(),微调器文本会闪烁,然后变为空白;做出选择后。 我正在使用 recreate 根据微调器选择加载区域设置
我最近遇到了 的问题每当我滚动时,网站顶部/底部都会出现白色块 它更大一点。白色块是 的一部分正文背景 ,因为改变 body backgroundcolor 会使块也改变颜色。 我已经试过了设置 bo
我在 iOS7、iPhone 4 及更高版本的状态栏上遇到了一些问题。因为我的应用程序的背景是深色的,所以我需要状态栏是白色的,这样看起来不错。但是,当最小化应用程序、等待几秒钟并返回应用程序时,它会
我是一名优秀的程序员,十分优秀!