我正在使用高图表。一切看起来都很好,但我不确定为什么系列文本(LLLL!,XYZM)在文本中添加白色背景或阴影。我尝试使用 textShadow: 'none' 删除此白色背景。还尝试了backgroundColor: 'rgba(0, 0, 0, 0)',但它似乎不起作用。还有其他建议吗?
// container7
var chartOptions = {
chart: {
type: 'column',
inverted: true,
height:200
},
title: {
text: ''
},
xAxis: {
lineColor: 'white',
categories: ['ABCD'],
labels: {
padding: 40, // Add padding of 40 to the x-axis labels
style: {
fontSize: '12px' // Adjust the font size as needed
}
}
},
yAxis: {
allowDecimals: false,
max: 100,
title: {
text: ''
},
labels: {
enabled: false // Hide y-axis labels
},
gridLineWidth: 0 // Remove grid lines
},
plotOptions: {
column: {
stacking: 'normal', // this will be our default
dataLabels: {
enabled: true,
style: {
color: 'black', // Set font color to black
fontSize: '13px', // Set font size to 12px
textShadow: 'none' // Remove text shadow
},
backgroundColor: 'rgba(0, 0, 0, 0)', // Set background color to transparent
formatter: function() {
return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
}
}
}
},
colors: ['#d37295', '#fabfd2'],
series: [{
name: 'LLLL!',
data: [57]
}, {
name: 'XYZM',
data: [43]
}],
legend: {
enabled: false // Hide the legend
},
credits: {
enabled: false // Hide the credits
}
};
// Render the chart using Highcharts
Highcharts.chart('container7', chartOptions);
<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>... look like this:</h2>
<div id="container7" style=" border: 1px solid lightgray;"></div>
您正在寻找的是
dataLabels.style.textOutline
。只需将此属性设置为 none
即可解决您的问题。
API:https://api.highcharts.com/highcharts/plotOptions.timeline.dataLabels.style.textOutline
const chartOptions = {
chart: {
type: 'column',
inverted: true,
height:200
},
title: {
text: ''
},
xAxis: {
lineColor: 'white',
categories: ['ABCD'],
labels: {
padding: 40,
style: {
fontSize: '12px'
}
}
},
yAxis: {
allowDecimals: false,
gridLineWidth: 0,
max: 100,
title: {
text: ''
},
labels: {
enabled: false
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
backgroundColor: 'rgba(0, 0, 0, 0)',
style: {
color: 'black',
fontSize: '13px',
textOutline: 'none' // remove white outline
},
formatter: function() {
return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
}
}
}
},
colors: ['#d37295', '#fabfd2'],
series: [{
name: 'LLLL!',
data: [57]
}, {
name: 'XYZM',
data: [43]
}],
legend: {
enabled: false
},
credits: {
enabled: false
}
};
Highcharts.chart('container', chartOptions);
<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>textOutline: 'none':</h2>
<div id="container" style=" border: 1px solid lightgray;"></div>