作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经生成了类似的东西。
使用以下代码作为 highchart 选项:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
colors: [ '#ff058d', '#9696b2'],
title: {
text: null
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
align: 'left',
x: 0,
y: -20,
fontsize: '1em',
color: 'black'
}
},
yAxis: {
visible: false,
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
visible: false,
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Compliant',
data: [5, 3, 4, 7, 2]
}, {
name: 'Non-Compliant',
data: [2, 2, 3, 2, 1]
}]
});
但我想要像下面这样的东西。根据上面的代码,我怎样才能生成下面的图像?我想要每个图表前面的页脚和标题。
最佳答案
您应该能够通过使用 stackLabels 和 dataLabels 功能及其格式化回调函数来自定义它们来实现它。
演示:https://jsfiddle.net/BlackLabel/m1skyt9g/
在栏旁边显示百分比值的代码(我不确定这是否是要显示的正确值,但您应该能够轻松地将其更改为您的要求):
stackLabels: {
enabled: true,
x: 6,
formatter() {
let output = Math.round(this.total / this.points[0][0] * 100) / 100;
return output + '%'
}
}
将“页脚”显示为数据标签:
dataLabels: {
enabled: true,
align: 'left',
allowOverlap: true,
y: 23,
formatter() {
let output = Math.round(this.total / this.y * 100) / 100
if (!this.colorIndex) {
return '';
} else {
return 'Previous Non-Compliance of ' + output + '%'
}
}
}
API:https://api.highcharts.com/highcharts/yAxis.stackLabels.format
API:https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
请告诉我这是否是您的想法。
关于javascript - 如何为 Highcharts 中每个系列堆叠的水平条添加页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59924211/
我是一名优秀的程序员,十分优秀!