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％等）

如果我从plotOptions.Series.DataLabels中删除了useHTML = true选项，则会再次显示百分比，但它会引入我正在使用useHtml选项修复的其他样式问题。

有没有办法让useHTML设置为true，并且更新后dataLabel不会消失？

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。

通过ajax加载Highcharts数据会删除Datalabels

1 个答案: