0

UPDTAED:以下のコードを使用すると、json が正しく解析されます。

しかし、最初のロードでは列が表示されません。カーソルを上に置くと、シリーズの名前と値を表示するツールチップが表示されます。ただし、ブラウザ ウィンドウのサイズを変更すると、列が表示されます。chart.redraw(); を追加してみました。updatedChart() の後; しかし、それは私のdivが以下の通りであることを助けません

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

アイデアはありますか？また、私はjsfiddleでこの問題を再現することはできず、サファリ、クローム、ファイアフォックスでこれをテストしました(すべてこの奇妙な動作を示しています)

            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 に答える