如何更改圆环图中文本的颜色
How to Change the color of the text in donut chart
如何更改圆环图中的特定文本颜色
示例:"10% Need Action"
,我需要将10%
更改为红色。
我已将文本包含在donutchart中。如上所述,我正试图改变文本的颜色。
这是我的代码
$(function ()
{
$('#dc-target-fill-rates').highcharts({
chart: {
type: 'pie',
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
title: {
verticalAlign: 'middle',
floating: true,
text: "<span><b>10%</b><br/>Need Action</span>",
style: { color: '#60727d', fontSize: '15px', fontFamily: 'Avenir LT Std Light' },
x: 0,
y: -5
},
subtitle: {
//text: '3D donut in Highcharts'
},
tooltip: {
style: { fontFamily: 'Avenir LT Std Heavy' },
shadow: false,
useHTML: true,
backgroundColor: 'rgba(255, 255, 255, 0.85)',
borderColor: '#a9a9a9',
headerFormat: "",
pointFormat: '<span style="color: {point.color}">●</span><span style="color: {point.color}"> {point.name}</span> : <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
innerSize: '80%',
//depth: 45,
shadow: false,
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Need Action',
y: 5,
color: '#fc5d45'
}, {
name: 'At Risk',
y: 10,
color: '#ffd52f'
}, {
name: 'On Track',
y: 50,
color: '#5db567'
}]
}]
});
});
更改类.highcharts-title tspan
的fill
。参考https://jsfiddle.net/hrv3tfzs/
将此样式添加到您的CSS
.highcharts-title tspan {
fill: red;
}
作为Pugazh建议的替代方案,您可以执行以下操作:
title: {
verticalAlign: 'middle',
floating: true,
text: "<span style='color: red; font: 15px Arial;'><b>10%</b><br/>Need Action</span>"
x: 0,
y: -5,
useHTML: true
},
如果使用useHTML
属性,则可以在标题文本中添加简单标记。Highcharts span标记因在图表呈现为SVG时交换值而臭名昭著,这就是为什么我将样式添加为内联代码而不是原始代码中的style
属性。
只需注意你在这里的引号,并避免使用任何额外的单引号或双引号。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- 如果值为负数,如何更改文本的颜色
- 1种颜色的Javascript闪烁文本更长
- 如何更改圆环图中文本的颜色
- 如何在flash html5画布项目中动态更改文本颜色
- 单击时将文本的颜色更改为随机颜色(按钮)
- 使用JavaScript淡化文本颜色
- 在不更改边框颜色的情况下更改文本的颜色
- 使用Javascript切换文本颜色
- 我可以使用jqgrid的oncellselect事件根据单元格内容将文本颜色更改为蓝色吗
- 使用Javascript更改文本区域的颜色
- 如何使用颜色选择器来更改背景中的文本
- 内部 DIV 颜色文本在鼠标悬停时没有更改
- React Native TouchableHighlight字体颜色文本更改
- 邮件类型输入:如果邮件错误或正确,动态改变按钮的颜色/文本