Highcharts图表无法显示

前几天在使用Highcharts图表的时候遇到了无法显示的问题，一番折腾之后终于解决，把我的一点经验记录在这里。

首先是最简单的基础折线图，一般来说基础折线图的表现是最好的，我没有遇到过它无法显示的问题，使用方法是在页面上添加网站提供的id为Highcharts的div，然后引入相关js文件，最后在页面中加入js代码，于是一个Highcharts图表就可以显示了，然后根据自己的需要修改文字以及数据即可。

js代码如下：

/**
  * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
 **/
var chart = new Highcharts.Chart('container', {
    title: {
        text: '不同城市的月平均气温',
        x: -20
    },
    subtitle: {
        text: '数据来源: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
        title: {
            text: '温度 (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: '东京',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: '纽约',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: '柏林',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: '伦敦',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
}); 

我发现在最上方有一段注释：

Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表

因此我猜测基础折线图应该是最新的图，而其他图出现的无法显示问题很有可能是版本问题，也就是没有更新，因此我一般会参照基础折线图对其他图表进行修改，然后就可以正常显示。

比如堆叠面积图，第一次引入的时候无法显示，于是我根据基础折线图进行了修改，最终正常显示。

堆叠面积图js代码如下：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: '全球各大洲人口增长历史及预测'
        },
        subtitle: {
            text: '数据来源: Wikipedia.org'
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: '十亿'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000;
                }
            }
        },
        tooltip: {
            split: true,
            valueSuffix: ' 百万'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [{
            name: '亚洲',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: '非洲',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: '欧洲',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: '美洲',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: '大洋洲',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]
    });
});

可以发现，与基础折线图的最大差别在于代码的开头部分，

基础折线图是这样写的：

var chart = new Highcharts.Chart('container', {

而堆叠面积图是这样写的：

$('#container').highcharts({   

于是我类似地进行了修改，图表正常显示。

与之类似，引入蜘蛛图的时候也不能显示，但是头部改成上述样子依然不行。我再看代码发现基础折线图没有：

$(function () {

这部分，于是我删去了蜘蛛图的相应部分，正常显示。
当然这种方法也不是100%正确的，但是是一种思路，并且确实解决了我的问题，大家还是可以借鉴借鉴。