Highcharts不显示图表

Question

我在显示图表时遇到问题。我正在创建一个脚本，显示三个带有打印按钮的图表，将所有图表打印为一个PDF。

JSON调用正在返回：

[{"name":"Month"},{"name":"percent","data":[9.52]}]

我没有在浏览器控制台中收到任何错误，任何人都可以看到我出错的地方。

$(function () { //1
var chart1, chart2, chart3; 
var categories=[];
//var chart;
var data2 =[];

$(document).ready(function() { //2
    $.getJSON("../charts/1-2-4-detractors_month_chart.php?From=<?php echo $_GET['From'];?>&To=<?php echo $_GET['To'];?>", function(json) { //3
    $.each(json,function(i,el) { //4
        if (el.name=="Month") 
            categories = el.data; 
            else data2.push(el); 
        }); 

    chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container1',
        type: 'column',
        marginTop: 25,
            marginRight: 25,
        marginBottom: 25,
            plotBackgroundColor: '#FCFFC5',
            style: {
        fontFamily: 'serif',
                fontSize: '8px',
        }
        },
    title: {
        text: '',
    },
    subtitle: {
        text: '',
    },
    xAxis: {
        categories: categories,
    labels: {
        enabled: false
    }
    },

    yAxis: {
        endOnTick: false,
        max:101,
        showFirstLabel: false,
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickWidth:1,
        tickLength:2,
        tickInterval: 10,
        gridLineColor:'#ddd',
        title: {
            text: '',
            style: {
                fontFamily: 'Tahoma',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '8px'
            }
        },
        plotLines: [{
            color: '#808080'
        }]
    },

    legend: {
        enabled: false,
    },
    colors: ['#FF0000','#FF2F2F'],

    plotOptions: {
        column: {
            colorByPoint: true
        },
        series: {
            cursor: 'pointer',
            pointWidth: 20,
            point: {
                events: {
                    //click: function() {
                    //location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
                    //}
                }
        },
    legendIndex:0,

    dataLabels: {
        enabled: true,
        color: '#000000',
        align: 'center',
        cursor: 'pointer',
        borderRadius: 5,
        backgroundColor: 'rgba(252, 255, 255, 255)',
        borderWidth: 1,
        borderColor: '#AAA',
        y: -6,
        format: '{y:.2f} %', // one decimal
        y: -20, // 10 pixels down from the top
        style: {
            textShadow: false,
            fontSize: '8px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
    }
    },

    tooltip: {
        style: {
            fontSize: '7pt',
            fontFamily: 'Verdana, sans-serif'
        },
        valueDecimals: 1,
        formatter: function() {
            return '<b>Guest responses:<br/>  '+ this.y +'%</b>';
        }
    },

    navigation: {
        buttonOptions: {
            verticalAlign: 'top',
            y: -10,
            x: -20
        }
    },

    credits: {
        enabled: false
    },

    series: data2,
    lang: {
        noData: "No data"
    },
    noData: {
        style: {
            fontWeight: 'normal',
            fontSize: '12px',
            color: '#303030'
        }
    },
    });
    });
});

//});

//--------------------------------------------------------------------
$("#print").click(function () {
     printCharts([chart1, chart2, chart3]);
});


//--------------------------------------------------------------------
function printCharts(charts) {

    var origDisplay = [],
    origParent = [],
    body = document.body,
    childNodes = body.childNodes;

    // hide all body content
    Highcharts.each(childNodes, function (node, i) {
        if (node.nodeType === 1) {
            origDisplay[i] = node.style.display;
        node.style.display = "none";
    }
    });

// put the charts back in
$.each(charts, function (i, chart) {
    origParent[i] = chart.container.parentNode;
    body.appendChild(chart.container);
});

// print
window.print();

// allow the browser to prepare before reverting
setTimeout(function () {
    // put the chart back in
    $.each(charts, function (i, chart) {
        origParent[i].appendChild(chart.container);
    });

    // restore all body content
    Highcharts.each(childNodes, function (node, i) {
        if (node.nodeType === 1) {
            node.style.display = origDisplay[i];
        }
    });
    }, 500);
}
});