我正在使用Angular 为10的highchart图形。下面是显示不同颜色和值的2个圆形进度条的图表。
new Highcharts.chart('container', {
exporting: {
enabled: false
},
chart: {
type: 'solidgauge',
events: {
render() {
let chart = this,
label1 = chart.series[0].dataLabelsGroup,
label2 = chart.series[1].dataLabelsGroup;
label1.translate(chart.marginRight, 0)
label2.translate(chart.marginRight, chart.plotTop - label2.getBBox().height)
}
}
},
legend: {
enabled: false // disable the legend
},
credits: {
enabled: false
},
pane: {
startAngle: 180,
background: this.getBackgroundSettingsForDepositStatusGraph()
},
tooltip: {
outside: true
},
title: false,
accessibility: {
point: {
valueSuffix: ''
}
},
xAxis: {
tickInterval: 1,
minorGridLineWidth: 0,
labels: {
align: 'right',
useHTML: true,
allowOverlap: true,
step: 1,
y: 3,
style: {
fontSize: '13px',
color: "black"
}
},
lineWidth: 0,
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: true,
verticalAlign: 'middle'
},
}
},
series: [
{
name: "Total",
showInLegend: true,
data: [
{
color: Highcharts.getOptions().colors[0],
radius: "115%",
innerRadius: "110%",
y: Math.round(this.data.total.percentage),
dataLabels: {
format: "{y}%",
borderWidth: 0,
style: {
fontSize: "15px"
}
}
}
]
},
{
name: 'Amount',
showInLegend: true,
data: [
{
color: Highcharts.getOptions().colors[2],
radius: "105%",
innerRadius: "100%",
y: Math.round(this.data.amount.percentage),
dataLabels: {
format: "{y}%",
borderWidth: 0,
style: {
fontSize: "15px"
}
}
}
]
}
]
});
与此沿着,我需要在此图表下添加2个线性进度条,具有相同的值和一些额外的数据。
例如:
总计25 60(线性进度条与this.data.total.percentage)
金额45 100(线性进度条与this.data.amount.percentage)
注意:线性条应该显示在圆形进度条下面,也应该以示例中给出的格式显示。
我尝试了很多方法,但线性酒吧重叠圆形之一。
1条答案
按热度按时间omvjsjqw1#
正如@FunkMonkey33所说,你可以为每个图表使用不同的div。如果你想避免为单独的图表重复相同的选项,你可以通过
Highcharts.setOptions()
全局设置它们示例代码:
简化演示:https://jsfiddle.net/BlackLabel/vr2d31f4/
演示:https://jsfiddle.net/BlackLabel/jsmqacfu/
文件:https://www.highcharts.com/docs/getting-started/how-to-set-options#global-options
API参考:https://api.highcharts.com/class-reference/Highcharts.html#.setOptions