highcharts嵌套双环图双饼图
官方演示里都是有父级关系的的旭日图/双饼,想要个单纯比较关系,但是没有父级的嵌套双环图
先上图
HTML:
1.想要两层的圆环图都显示dataLabel,需要宽度为500px,500px宽于全部型号手机,缩放0.75倍
2.在手机页面显示左右溢出,增加弹性父级嵌套,父级居中显示,并且overflow: hidden,水平居中get
<div class="container1-box">
<div id="container1"
style="min-width: 500px; height: 300px; transform: scale(0.75);"></div>
</div>
css:
.container1-box {
display: flex;
width: 100%;
overflow: hidden;
justify-content: center;
}
js:
//双圆环图
var chart2 = new Highcharts.chart('container1', {
chart: {
type: 'pie',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: null
},
credits: {
enabled: false // 禁用版权信息
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
series: [{
name: '伴侣得分',
data: [{
name: 'a',
y: 20,
color: '#32A6A3'
}, {
name: 'b',
y: 40,
color: '#ED93B5'
}, {
name: 'c',
y: 40,
color: '#FC983B'
}],
size: '70%',
innerSize: '50%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name + ':</b> ' +
this.y : null;
},
color: '#ffffff',
distance: -35
}
}, {
name: '本人得分',
data: [{
name: 'a',
y: 50,
color: '#32A6A3'
}, {
name: 'b',
y: 20,
color: '#ED93B5'
}, {
name: 'c',
y: 30,
color: '#FC983B'
}],
size: '100%',
innerSize: '70%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
this.y : null;
},
color: '#ffffff',
distance: -25
},
id: 'versions'
}],
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
series: [{
id: 'versions',
dataLabels: {
enabled: false
}
}]
}
}]
}
});