【发布时间】：2021-05-04 13:12:35
【问题描述】：
我试图实现下面的图表。但是，我面临两个问题。我能够创建大部分图表。这是Working fiddle的链接。
- 在这里，我能够获得如图所示的数据标签，但我不想使用该功能。如果可以的话，请告诉我怎么做？
- 其次是数据标签和图表之间的连接线。即使使用任何功能，我也能够实现这一点。有一种称为饼图连接器形状的东西，其中我们有一个选项，即 crookedLine。下图中的连接线看起来像这样。请帮助我，即使有功能。
Highcharts.chart('container', {
chart: {
type: 'venn',
marginLeft: 350,
events: {
load: drawDataLabel
}
},
title: {
text: 'EXTERNAL IP MALWARE INFECTION SUMMARY'
},
subtitle: {
text: '<span><b>85%</b> 85 IPS NOT INFETCED<span>',
useHTML: true,
style: {
color: '#34c52d',
fontWeight: 400,
padding: '2px 20px',
border: '2px solid #F2F2F2'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
venn: {
borderColor: 'transparent'
}
},
tooltip: {
enabled: false
},
series: [{
type: 'venn',
dataLabels: {
enabled: false,
align: 'left'
},
data: [{
sets: ['A'],
name: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>15 % IPs WITH MALWRAE INFECTION</div>",
value: 10,
color: '#ffb81c',
dataLabels: {
//x: series.dataLabel.x,
x: 0,
y: -70,
color: '#FFB81C',
//borderColor: '#F2F2F2',
//borderWidth: 2,
useHTML: true,
style: {
//width: 200,
textOutline: 'none'
}
}
}, {
sets: ['B'],
name: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>5% 5 INFECTED WITH CNCs</div>",
value: 5,
color: '#ff8319',
dataLabels: {
//x: 'point.x',
//x: -363,
y: 0,
color: '#FF8319',
//borderColor: '#F2F2F2',
//borderWidth: 2,
useHTML: true,
style: {
//width: 200,
textOutline: 'none'
}
}
}, {
sets: ['C'],
value: 2,
name: "<div style='width:36vw; padding:0.3em; border: 2px solid #F2F2F2'>3% 3 IPs BLACKLISTED</div>",
color: '#e30000',
dataLabels: {
//x: 'point.x',
//x: -301,
y: 70,
color: '#e30000',
//borderColor: '#F2F2F2',
//borderWidth: 2,
useHTML: true,
style: {
//width: 200,
textOutline: 'none'
}
}
},
{
sets: ['A', 'B'],
value: 4.999,
name: ' ',
color: '#FF8319'
},
{
sets: ['B', 'C'],
value: 1.999,
name: ' ',
color: '#e30000'
}
]
}]
});
function drawDataLabel() {
var points = this.series[0].points,
point1R = points[0].shapeArgs.r;
this.renderer.label('15 % IPs WITH MALWRAE INFECTION', 0, 150, 'rect', points[0].plotX + this.plotLeft, points[0].plotY + this.plotTop)
.css({
color: '#FFB81C'
})
.attr({
width: 210,
fill: '#FFFFFF',
'stroke-width': 2,
stroke: '#F2F2F2',
padding: 5,
fontWeight: 400,
zIndex: 6
})
.add();
this.renderer.label('5% 5 INFECTED WITH CNCs', 0, 270, 'rect', points[1].plotX + this.plotLeft, points[1].plotY + this.plotTop)
.css({
color: '#FF8319'
})
.attr({
width: 210,
fill: '#FFFFFF',
'stroke-width': 2,
stroke: '#F2F2F2',
padding: 5,
fontWeight: '400',
zIndex: 6
})
.add();
this.renderer.label('3% 3 IPs BLACKLISTED', 0, 210, 'rect', points[2].plotX + this.plotLeft, points[2].plotY + this.plotTop)
.css({
color: '#E30000'
})
.attr({
width: 210,
fill: '#FFFFFF',
'stroke-width': 2,
stroke: '#F2F2F2',
padding: 5,
fontWeight: '400',
zIndex: 6
})
.add();
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/venn.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>【问题讨论】：
标签： javascript angular charts highcharts venn-diagram