Загрузка данных Highcharts через ajax удаляет Datalabels

Question

У меня есть гистограмма HighCharts, которая заполняет данные от вызова ajax следующим образом.

var updateChart = function() {
            $.ajax({
                url: "/theurl/theid",
                type: "Get",
                success: function(data) {
                    chart.xAxis[0].setCategories(data.SomeText);
                    chart.series[0].setData(data.SomeData, true);
                    chart.series[1].setData(data.OtherData, true);
                }
            });
        };

График построен так

var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart(
                {
                    chart: {
                        type: 'bar',
                        renderTo: 'container',
                        height: 750
                    }, ... (more options removed for brevity),                
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,
                                format: '{y} %',
                                style: {
                                    fontWeight: 'bold',
                                    color: '#3b3b3b',
                                    fontSize: '125%'
                                },
                                useHTML: true
                            }
                        },
                        bar: {
                            dataLabels: {
                                enabled: true
                            },
                        }
                    },
                  ... (more options removed for brevity)
            );
        });

Идея состоит в том, что данные в диаграмме будут обновляться динамически каждые 10 секунд, и перезагрузка всей страницы не вариант.

Данные загружаются и диаграмма отображается только при запуске updateChart() из консоли. В первый раз, когда я запускаю updateChart(), все выглядит нормально, однако во второй раз, когда я выполняю его (без перезагрузки страницы), все появляется, кроме dataLabels, который должен показывать процент (100%, 55% и т. Д.)

Если я удаляю опцию useHTML = true из plotOptions.Series.DataLabels, процент снова отображается, но в нем появляются другие проблемы со стилем, которые я использовал для использования опции useHtml.

Есть ли способ установить для useHTML значение true и не допустить исчезновения dataLabels при обновлении?

Answer 1

Я попробовал ваш код, и он отлично работает, см.: http://jsfiddle.net/2Gbja/2/

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.xAxis[0].setCategories([Math.random(), Math.random()], false);
    chart.series[0].setData([Math.random(), Math.random()], false);
    chart.series[1].setData([Math.random(), Math.random()], true); //redraw chart once
});

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    series: [{
        data: [10, 20]
    },{
        data: [10, 20]
    }]
});

Примечание: перерисовать диаграмму только один раз, поэтому есть false для перерисовки и только последний true,