javascript - 需要更改标题颜色甜甜圈高图
问题描述
这是我的函数,它在我的 html 中呈现甜甜圈高图表。我能够将动态颜色添加到图例标记/图标。但现在我还需要将动态颜色添加到图例标题中。我可以弄清楚这一点。
我怎样才能做到这一点?请帮忙!!!
const chart = new Highcharts.Chart(
{
chart: {
color: '#000',
backgroundColor: '#336196',
renderTo: 'container',
type: 'pie'
},
title: {
text: "What's using data",
style: {
color: '#000'
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
borderColor: null
}
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %'
}
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
symbolRadius: 0,
symbolPadding: 10,
itemMarginTop: 15,
itemStyle: {
color: '#fff'
}
},
series: [
{
name: 'Browsers',
data: data,
size: '120%',
innerSize: '60%',
showInLegend: true,
dataLabels: {
enabled: false
},
marker: {
symbol: 'square',
radius: 12
}
}
]
},
function(chart) {
var textX = chart.plotLeft + chart.plotWidth * 0.5
var textY = chart.plotTop + chart.plotHeight * 0.52
var span =
'<div id="pieChartInfoText" style="position:absolute; text-align:center;">'
span +=
'<div style="color:#fff;font-size: 20px;width:50pxmargin-top:36px;margin-left:18px;"></div><br>'
span += '</div>'
$('#addText').append(span)
span = $('#pieChartInfoText')
span.css('left', textX + span.width() * -0.5)
span.css('top', textY + span.height() * -0.5)
}
)
任何帮助将不胜感激。谢谢!!!
解决方案
要更改图例颜色标题,只需设置:
legend: {
title: {
text: 'legend title',
style: {
color: 'red'
}
}
}
但是,如果要更改单个图例项文本,则需要使用:
function(chart) {
var legendItems = $(".highcharts-legend-item");
$(legendItems[0].children[0]).css('fill', 'red');
}
现场演示:http: //jsfiddle.net/BlackLabel/avhtLm3w/
推荐阅读
- api - Discord API:通过 OAuth2 隐式授权流程获取用户
- python - 在以顶点为中心的网格中绘制环
- php - 我们需要在 phpleague / oauth1-client php 库中放置哪些详细信息来代替标识符和秘密
- javascript - 如何使用引导模式使用 ejs 编辑数据
- php - Classipress (wordpress) 主页遇到问题
- linux - 如何将四核的 3 个核心与 Linux 隔离并专门用于 Halcon?
- rust - 如何在 Rocket 中返回从外部 API 查询的对象数组
- excel - 在 Excel 中,每行保存一个数组,使用索引
- sql - SERIAL 字段/自动递增
- webcrypto-api - 使用 Cloudflare Workers 验证 HMAC 哈希