Попытка включить изображение в метку данных диаграммы упакованного пузыря. Изображение вставляется в метку данных, но не выравнивается по центру. Иногда это так, а иногда нет. Мой подход выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css"/>
</head>
<body bgcolor="#ffffff">
<div id="container1" style="width: 100%; height: auto; margin-right: 0 "
align="right"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="{% static 'js/lang.js'%}"></script>
<script>
var screen_name={{screen_name|safe}}
var id={{id|safe}}
var chart1=Highcharts.chart('container1', {
chart: {
type: 'packedbubble',
height:'100%'
},
title: {
text: '<p data-mlr-text>أبرز 10 مغردین</p>',
useHTML:true
},
legend: {
enabled: false
},
tooltip: {
useHTML:true,
formatter:function(){
var headerFormat=this.point.name;
var pointFormat='<br /><b>'+this.point.y+'</b>'
return [headerFormat,pointFormat]
}
},
plotOptions: {
packedbubble: {
minSize: '40',
maxSize: '80',
zMin: 0,
zMax: 5000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
align:'center',
enabled: true,
useHTML:true,
formatter: function(){
width=this.point.marker.radius
return '<img
src="https://avatars.io/twitter/'+this.point.name+'" style="max-
width:'+width+'px;max-height:'+width+'px"></img><br />'
},
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
},
series: [{
name: 'Top 10 Users',
data: (screen_name),
}]
});
Поскольку размер пузырька является динамическим, включили свойство max-height и width изображения, чтобы они оставались внутри пузыря. Но изображение не начинается в центре круга. Его позиция меняется каждый раз. Хотите, чтобы изображение полностью заполнило круг и не выходило за пределы круга