Question

我正在尝试使用带有图标的自定义数据标签。它呈现正确，但在导出时，图像不会出现。我确实尝试过不同格式的图像，但这似乎也不起作用。

我在配置中遗漏了什么吗？

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>

Answer 1

如果您希望导出模块支持在格式化程序中使用HTML语言，则必须在导出对象中设置“allowHTML：true”，如下所示：

exporting: {
    allowHTML: true,
}

有API参考：http://api.highcharts.com/highcharts/exporting.allowHTML

JSFiddle：https://jsfiddle.net/daniel_s/9g90hdad/

最诚挚的问候！

数据标签中的图像/图标未导出 - 高图树图

1 个答案: