Question

我有一个带有各种选择菜单的页面。选择选项在ajax调用中用于构建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)}]
        }]
     });

}

Answer 1

我通过一个简化的示例重现了您的问题：http://jsfiddle.net/BlackLabel/sm2r684n/

这是第一次，图像异步加载，并且图表在计算边距时未将其考虑在内。每次下一次结果都是不同的，因此您应该等到图片加载完毕

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

实时演示：http://jsfiddle.net/BlackLabel/m09ok2cg/

Answer 2

我认为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();

第一次刷新后，x轴图像在高图中消失

2 个答案: