0
アイコン付きのカスタムデータラベルを作成しようとしています。それは正しくレンダリングされますが、エクスポート時にイメージは表示されません。私はさまざまなフォーマットの画像を試しましたが、どちらもうまくいかないようです。データラベル内の画像/アイコンがエクスポートされない - ハイチャートの図形
設定に何か不足していますか？
Highcharts.chart('container', {
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
useHTML: true,
style: {
fontSize: '15px',
fontWeight: 'bold'
},
formatter: function() {
return '<div><span>'+this.point.name+'</span>-<span>'+this.point.value+'</span><img src='+this.point.icon+' width="30px"/></div>'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500",
value: 10,
icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJDYXBhXzEiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUwIDUwIiB3aWR0aD0iNTBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZD0iTTI5Ljk4LDE4LjI1MmMtMS4xMzcsMC0yLjAzMSwwLjI3NS0yLjgyNCwwLjUyYy0wLjEwOSwwLjAzMi0wLjIxMywwLjA2NS0wLjMxNSwwLjA5MWwzLjc0Ny0zLjgwOSAgIGMwLjMxOC0wLjMyNywwLjMyLTAuODUyLTAuMDAyLTEuMTY5Yy0wLjMyLTAuMzIzLTAuODQ0LTAuMzI2LTEuMTYtMC4wMDJsLTMuNjA0LDMuNjcydi02Ljc0NGMwLjAwMS0wLjQ1OC0wLjM2NS0wLjgzNS0wLjgxMy0wLjgzMyAgIGMtMC40NTgsMC4wMDEtMC44MjMsMC4zNjktMC44MjMsMC44MzJsLTAuMDAyLDguMzAzYy0wLjQ1Mi0wLjA4LTAuODg4LTAuMjA2LTEuMzMzLTAuMzRjLTAuNzkxLTAuMjQ2LTEuNjk1LTAuNTI0LTIuODItMC41MjQgICBjLTQuMzI0LDAtNy40NjEsMi45NjQtNy40NjEsNy4wMzhjMCwyLjEyNywxLjAyNiw0Ljg2MywxLjUxOCw2LjE3N2wwLjE0LDAuMzY3YzAuMTI3LDAuMzUzLDAuMzIxLDAuOTM1LDAuNTIsMS41MTMgICBjMC4yNTcsMC43NzQsMC41MjIsMS41NTEsMC42NDIsMS44NDhjMS4wMTYsMi41NSwyLjI1OCw0LjgyOCw2LjIyMyw0LjgzMmw2Ljc3My0wLjAwNGMzLjk2NiwwLjAwNCw1LjIwNy0yLjI3OCw2LjIyOS00LjgyNCAgIGMwLjExNy0wLjI5MSwwLjM4LTEuMDcxLDAuNjQxLTEuODQyYzAuMTk1LTAuNTg0LDAuMzk2LTEuMTY0LDAuNTIxLTEuNTE2bDAuMTM1LTAuMzY5YzAuNDktMS4zMTQsMS41MjEtNC4wNDcsMS41MjMtNi4xNzQgICBDMzcuNDMsMjEuMjE0LDM0LjMsMTguMjUyLDI5Ljk4LDE4LjI1MnogTTM0LjM3NywzMC44NzlsLTAuMTQzLDAuMzg1Yy0wLjEzMywwLjM2LTAuMzM0LDAuOTU5LTAuNTI5LDEuNTUzICAgYy0wLjI1MiwwLjczNi0wLjUwNSwxLjQ3Ni0wLjYxNSwxLjc2MWMtMS4wNDgsMi42MjItMS45NzksMy43OTMtNC43MDMsMy43OTFsLTYuNzcyLTAuMDAzYy0yLjczOCwwLjAwMS0zLjY1OS0xLjE3Mi00LjcwMi0zLjc5MiAgIGMtMC4xMTYtMC4yODItMC4zNjctMS4wMjUtMC42MTYtMS43NjNjLTAuMTk3LTAuNTk2LTAuNDAxLTEuMTg4LTAuNTMzLTEuNTUzbC0wLjE0NC0wLjM4Yy0wLjQxOC0xLjEyOS0xLjQxLTMuNzY3LTEuNDEtNS41ODYgICBjMC0zLjE2NiwyLjM5Ni01LjM4Myw1LjgyMS01LjM4NmMwLjg4NiwwLjAwMywxLjU4OCwwLjIyLDIuMzQ1LDAuNDVjMC43ODQsMC4yNDMsMS42MDIsMC40OTcsMi42MjgsMC40OTMgICBjMS4wMjQtMC4wMDMsMS44NC0wLjI0OSwyLjYzMi0wLjQ5YzAuNzQ1LTAuMjMsMS40NTItMC40NDQsMi4zNDItMC40NDRjMy40MjYtMC4wMDQsNS44MTksMi4yMTIsNS44MTksNS4zODIgICBDMzUuNzkxLDI3LjEyLDM0LjgwMSwyOS43NiwzNC4zNzcsMzAuODc5eiIvPjwvZz48L3N2Zz4="
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800',
value: 10,
icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJDYXBhXzEiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUwIDUwIiB3aWR0aD0iNTBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZD0iTTI1LjAwNSwxMi41NzJjLTYuODUyLTAuMDA3LTEyLjQzMSw1LjU3MS0xMi40MzUsMTIuNDI1Yy0wLjAwMiw2Ljg1Niw1LjU3NCwxMi40MjgsMTIuNDIyLDEyLjQzICAgQzMxLjg1NCwzNy40MjUsMzcuNDMsMzEuODU0LDM3LjQzLDI1QzM3LjQzNiwxOC4xNDYsMzEuODU3LDEyLjU3MiwyNS4wMDUsMTIuNTcyeiBNMjQuOTk0LDM1Ljc5ICAgYy01Ljk0NywwLTEwLjc4OC00Ljg0MS0xMC43ODYtMTAuNzk2YzAuMDAzLTUuOTQ5LDQuODQ2LTEwLjc4NywxMC43OTctMTAuNzg3YzUuOTQ2LDAsMTAuNzk0LDQuODQyLDEwLjc4NiwxMC43OTEgICBDMzUuNzk2LDMwLjk2LDMwLjk1MywzNS43OSwyNC45OTQsMzUuNzl6Ii8+PHBvbHlnb24gcG9pbnRzPSIyNS43NzcsMTguMjM0IDI1LjAxLDE2LjExNSAyNC4yMjksMTguMjM2IDIyLjAwNCwxNy44NDQgMjMuNDQ4LDE5LjU4MSAyMi4wMDMsMjEuMzExIDI0LjIyNywyMC45MjQgICAgMjUuMDA1LDIzLjA0MyAyNS43NzcsMjAuOTI0IDI4LjAwNSwyMS4zMTkgMjYuNTU1LDE5LjU4NSAyOC4wMDMsMTcuODUyICAiLz48L2c+PC9zdmc+"
}]
}],
title: {
text: 'Fruit consumption'
}
});#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>