javascript - Highchart 自定义标签似乎不适用于数据 :image/png;base64

Question

我想为标签使用自定义标签，但如果图像源是 data:image/png;base64，它似乎不会呈现.
在此搜索 online有人提到我应该使用 renderToStaticMarkup和/或 encodeURIComponent ，但这也不起作用。
请参阅下面的代码示例:

const graphOptions : Highcharts.Options = {
        chart: {
            width: 500,
            height: 250,
        },
        title: {
            text: ''
        },

        yAxis: {
            min: 0,
            title: {
                text: 'Votes'
            }
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.y} votes by ',
            footerFormat: '{point.key}',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{ 
            type: 'column',
            name: 'votes',
            data: votesData
        }],
        xAxis: {
            categories: addressData,
            labels: {
                useHTML: true,
                formatter: function() {
                    return renderToStaticMarkup(<span>
                        {<Avatar
                        src={makeBlockie("0x1e52C0887bc0F752368dFb80974ec988Ab40AED3")}
                        size={20}
                        alt={'0x1e52C0887bc0F752368dFb80974ec988Ab40AED3'}
                      /> }
                      </span>)
                }
            }                
        }
    }

    return (
        <div>
            <HighchartsReact highcharts={Highcharts} options={graphOptions} />
        </div>
    )

makeBlockie用于生成块状标识作为 base64 编码的 PNG

Answer 1

感谢您在评论中分享演示。它看起来像一个回归，我在 Highcharts Github 问题 channel 上报告了它，你可以在那里关注这个线程:https://github.com/highcharts/highcharts/issues/16149
作为解决方法，您可以使用最新的工作版本:https://jsfiddle.net/BlackLabel/aLx4o7u3/

<script src="https://code.highcharts.com/8.2.2/highcharts.js"></script>