第一次刷新后，xAxis图像在Highcharts中消失

我有一个页面，上面有各种选择菜单。在ajax调用中使用select选项来构建Highcharts条形图。每次过滤器更改时，都会重新创建图形。我这样做而不是更新序列数据，因为在过去我注意到销毁和重新创建比更新更有效

我希望图像显示在x轴上，因此我使用了一个创建两个x轴的小技巧，使用formatter在第一个轴上返回图像，并将第二个轴链接到第一个轴。这适用于第一次刷新。但是，此后每次重新创建图表时，图像都会消失。我检查了控制台，没有发现任何错误

你知道这里发生了什么吗

 /**
 * Whenselection changes
 */
$(document).on('change', '.filter', function(){


     getChartData($params)
    })

});


/**
 * API call to get data that will populate charts.
 * @param {obj} params
 */
function getChartData(params)
{
    //Get chart data
    $.ajax({
        url: apiURL + '/chartdata/',
        data: params,
        dataType: 'json',
        cache: false,
        success: function(data) {

            initChart(data[0]);
       }
 });

function initChart(chartData)
{
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'bar',
            backgroundColor: 'transparent', //#E8EAF6',
            height: '23%',
            marginLeft: 35
        },
        title: {
            text: null
        },
        xAxis: {
            categories: [category1, category2],
            lineColor: 'transparent',
            min: 0,
            tickColor: 'transparent',
            title: {
                text: null
            },
            labels: {
                x: -35,
                useHTML: true,
                overflow: 'allow',
                formatter: function () {
                    if(this.isFirst == true)
                        return '<img src="../assets/img/nat-jr-grad-gold.png"><br/>';
                    else
                        return '<img src="../assets/img/nat-jr-grad-purple.png"><br/>';

                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                useHTML: true,
                text: null
            },
            labels: {
                enabled: false
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            lineColor: 'transparent',
            gridLineColor: 'transparent',
        },
        legend: {
            enabled: false
        },
        series: [{
            name: category1,
            data: [{name: category1, y:Math.round(chartData.p_grad_nongap * 100), {y: null}],

        }, {
            name: category2,
            data: [null, {name: category2, y: Math.round(chartData.p_grad_gap * 100)}]
        }]
     });

/**
*当选择更改时
*/
$（文档）.on（'change'，'.filter'，function（）{
getChartData（$params）
})
});
/**
*API调用以获取将填充图表的数据。
*@param{obj}params
*/
函数getChartData（参数）
{
//获取图表数据
$.ajax({
url:apiURL+'/chartdata/'，
数据：params，
数据类型：“json”，
cache:false，
成功：功能（数据）{
initChart（数据[0]）；
}
});
函数初始化图（chartData）
{
var chart=Highcharts.chart（'容器'{
图表：{
类型：'bar'，
背景色：'透明'，/#E8EAF6'，
身高：23%，
边缘左侧：35
},
标题：{
文本：空
},
xAxis：{
类别：[类别1，类别2]，
lineColor:'透明'，
分:0,，
tickColor:'透明'，
标题：{
文本：空
},
标签：{
x:-35，
是的，
溢出：“允许”，
格式化程序：函数（）{
if（this.isFirst==true）
返回“
”；
其他的
返回“
”；
}
}
},
亚克斯：{
分:0,，
标题：{
是的，
文本：空
},
标签：{
已启用：false
},
线宽：0，
minorGridLineWidth:0，
网格线宽：0，
lineColor:'透明'，
gridLineColor:'透明'，
},
图例：{
已启用：false
},
系列：[{
名称：类别1，
数据：[{name:category1，y:Math.round（chartData.p_grad_nongap*100），{y:null}]，
}, {
名称：类别2，
数据：[null，{name:category2，y:Math.round（chartData.p_grad_gap*100）}]
}]
});

---

}

我用一个简化的例子再现了你的问题：

这是第一次以异步方式加载图像，而图表在计算边距时不考虑它。每次结果都不一样，因此您应该等到加载图片时：

var img = new Image();
img.onload = function() {
    initChart();
}
img.src = "https://www.highcharts.com/samples/graphics/sun.png";

---

现场演示：

我认为ppotaczek是问题的根本原因；图像是异步加载的，图表在计算边距时没有考虑到这一点。他的建议是使用setTimeout函数连续重新绘制图形，这是相当低效的。我的解决方法是将图像添加为创建图表后使用chart.renderer的平均元素

/* Render X-Axis images */
chart.renderer.image('../assets/img/img1.png', 0, 40, 32, 36)
    .css({
        class: 'icon-img',
        zIndex: 10
    })
    .add();

chart.renderer.image('../assets/img/img2.png', 0, 130, 32, 36)
    .css({
        class: 'icon-img',
        zIndex: 10
    })
    .add();

---

谢谢，这非常有帮助。我很感谢对发生的事情的解释。使用setTimeout函数连续重新绘制图形效率很低，因此最后我实际上只是附加了Using chart.renderer。不过，我会将您的答案标记为正确。嗨@坏程序员，我很高兴我能提供帮助。我只使用了

setTimeout

为了说明问题，而不是作为解决方案：