0

更新：现在使用下面的代码，json 解析正确，

但是这些列在初始加载时不显示，如果我将光标放在我可以看到显示系列名称和值的工具提示。但是，如果我重新调整浏览器窗口的大小，则会出现列。我尝试添加 chart.redraw(); 在updatedChart()之后；但它没有帮助我的 div 如下

<div id="container" style="min-width: 400px ; height: 650; margin:0 auto"></div>

请问有什么想法吗？此外，我无法在 jsfiddle 上重现此问题，并已在 safari、chrome 和 firefox 上对此进行了测试（都显示出这种奇怪的行为）

            var chart;
            options = {
                chart: {
                    renderTo: 'container',
                    type: 'column',
                },
                title: {
                    text: 'Some title'
                },
                subtitle: {
                    text: 'subtitle'
                },
                xAxis: {
                    categories: [],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'y-Axis',
                        align: 'high'
                    }
                },
                tooltip: {
                    formatter: function() {
                        return '' + this.series.name + ': ' + this.y + ' ';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -100,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: 
                []
            };
            $(document).ready(function() {
                chart= new Highcharts.Chart(options)
                console.log("calling update chart");    
                updateChart();
            });

            function updateChart() {
                $.ajax({
                    type: "GET",
                    url: "test.json",
                    async: false,
                    dataType: "json",
                    success: function(data){
                        console.log(data);


                        var i=0;
                        $.each(data,function(index,item){
                            console.log(data.Chart1[index]);
                            console.log("i value is "+i);
                            chart.addSeries(data.Chart1[index]);
                            i++;
                        });

                    }
                });
            }
            }

我的json输入文件在下面

            [
                        {
                            name: 'name1',
                            y: [32.6,16.6,1.5]
                        }, {
                            name: 'name2',
                            y: [6.7,0.2,0.6]
                        }, {
                            name: 'name3',
                            y: [1,3.7,0.7]
                        }, {
                            name: 'name4',
                            y: [20.3,8.8,9.5]
                        },{
                            name: 'name5',
                            y: [21.5,10,7.2]
                        }, {
                            name: 'name6',
                            y: [1.4,1.8,3.7]
                        }, {
                            name: 'name7',
                            y: [8.1,0,0]
                        }, {
                            name: 'name8',
                            y: [28.9,8.9,6.6]
                        }
                    ]
4

1 回答 1

4

编辑：

var chart = null,
    options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Some title'
        },
        subtitle: {
            text: 'subtitle'
        },
        xAxis: {
            categories: [],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'y-Axis',
                align: 'high'
            }
        },
        tooltip: {
            formatter: function() {
                return '' + this.series.name + ': ' + this.y + ' ';
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: []
    };
$(document).ready(function() {
    updateChart();
});

function updateChart() {
    $.getJSON('test.json', function(data) {

        // check if the chart's already rendered
        if (!chart) {
            // if it's not rendered you have to update your options
            options.series = data;
            chart = new Highcharts.Chart(options);
        } else {
            // if it's rendered you have to update dinamically
            jQuery.each(data, function(seriePos, serie) {
                chart.series[seriePos].setData(serie, false);
            });
            chart.redraw();
        }
    });
}

小提琴： 链接

于 2012-04-13T04:46:25.003 回答