Highchart 动态创建 - 无法正确渲染

2024-04-02

我正在使用动态函数制作高图绘图,在调用函数后它根本不会渲染。稍后如果我调整窗口大小,它会渲染数据吗?有什么具体原因吗?

我的功能:

var chart;
$(document).ready(function(){

    function randomData(len){
        var arr = [];
        for(var i = 0; i<len;i++){
            arr.push(Math.random())
        }
        return arr;
    }

    var options = {
        chart:{
            renderTo:'graph',
            type:'line'
        },
        title:{
            text:null
        },
        xAxis: {
            plotBands: [{
                    from: 5,
                    to: 6,
                    color: 'yellow',
                    label: {
                            text: 'Yellow'
                    }
            }, {
                    from: 10,
                    to: 11,
                    color: 'green',
                    label: {
                            text: 'Green'
                    }
            }]
    },
        plotOptions:{
            series:{
                animation:false,
                dataLabels:{enabled:true,formatter:function(){return Highcharts.numberFormat(this.y)}}
            }
        }
    }

    chart = new Highcharts.Chart(options);
    var i = 1, s1,s2,s3,s4;

    function createChart(){
        s1 = chart.addSeries({data:randomData(20),name:'Line'+i},false);
    }

    $('#create').click(function(){  createChart() });

})

请检查我的jsfiddle。

http://jsfiddle.net/w46Sr/ http://jsfiddle.net/w46Sr/


问题是你设置了set参数添加系列 http://www.highcharts.com/stock/ref/#chart-object为假。
在这种情况下,您必须设置为 true,它会在添加新系列后重新绘制图表。

For 一个系列赛.

chart.addSeries({data:randomData(20),name:'Line'+i},true);

就像下面的例子一样。
jsfiddle http://jsfiddle.net/w46Sr/1/

或者如果你想添加超过一个在每次点击系列中,您只需更改一件事。

function createChart(seriesData){
    s1 = chart.addSeries(seriesData,false);
}

$('#create').click(function(){
    createChart(seriesData);
    chart.redraw();
});

您将添加所有系列,然后重新绘制图表,因此您不必每次添加新系列时都重新绘制图表。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highchart 动态创建 - 无法正确渲染 的相关文章