0

我有一个 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() 一切看起来都很好，但是第二次执行它（没有重新加载页面）除了应该显示百分比（100%、55% 等）的 dataLabels 之外，一切都出现了

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

有没有办法将 useHTML 设置为 true 并且 dataLabels 在更新时不会消失？

4

1 回答 1

0

我试过你的代码，它工作正常，见：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。

于 2013-11-06T09:59:56.623 回答