为什么Highcharts测试的时候有用，移入项目中就失灵了

Question

Highcharts 柱状图不能显示

Answer 1

柱状图：
 <!-- 加载jquery -->
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<!-- javascript代码  -->
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '产品预期收益图'
            },
            credits: {
                enabled : false
},
            xAxis: {
                categories: [
                    '本产品收益',
                    '同类型产品',
                    '同期限产品',
                    '同投资方向',
                    '货币基金',
                    '一年期定存',
                    'CPI涨幅'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '收益率 (%)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">收益率: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}&nbsp%</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [ {
                name: '收益比较',
                data: [{'color':'#F6BD0F','y':3.6}, {'color':'#AFD8F8','y':8.8},  {'color':'#8BBA00','y':8.5}, {'color':'#FF8E46','y':3.4},  {'color':'#008E8E','y':6.0},   {'color':'#D64646','y':4.5}, {'color':'#8E468E','y':15.0}]
    
            },]
        });
    });
</script>
<!-- 加载 highC主js文件 ，-->
<script src="js/highcharts.js"></script>
<!-- 加载 exporting ，是highCharts实现打印，下载图片必须的js文件，如果不需要该功能，可不用-->
<script src="js/exporting.js"></script>
<!-- 新建一个容器，存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
    <div id="container" style="min-width:700px;height:400px"></div>

Answer 2

折线图：
 <!-- 加载jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- javascript代码  -->
<script type="text/javascript">
   $(function () {
                var chart;
                $(document).ready(function() {
                    //定义一个HighCharts
                    chart = new Highcharts.Chart({
                        //配置chart选项
                        chart: {
                        renderTo: 'highcharts1',  //容器名，和body部分的div id要一致
                        type: 'spline'                        //图表类型，这里选择折线图
            },
               //配置链接及名称选项
            credits: {
                enabled : true,
                href : "http://www.52wulian.org",
                text : "浏览总理：291，IP总数：74  -- 我爱物联网"
            },
            //配置标题
            title: {
                text: '我爱物联网 2012/09/22 访问统计',
                y:10  //默认对齐是顶部，所以这里代表距离顶部10px
            },
            //配置副标题
            subtitle: {
                text: '数据来源：百度统计',
                y:30
            },
            //配置x轴
            xAxis: {
                categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12',
                                         '13','14','15','16','17','18','19','20','21','22','23/点']
            },
            // 配置y轴
            yAxis: {
                title: {
                    text: '次数（次）'
                },
                labels: {  
                    formatter: function() {
                        return this.value +'次'
                    }
                }
            },
            //配置数据点提示框
            tooltip: {
                crosshairs: true,
                shared: true
            },
            //配置数据使其点显示信息
            plotOptions: {
                   spline : {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: true
                }
            },
            //配置数据列
            series: [{
                name: '浏览次数（PV）',
                er: {
                    symbol: 'square'
                },
                data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,
                            8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{
                name: 'IP数',
                er: {
                    symbol: 'diamond'
                },
                data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,
                          5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]
            }]
                    });
                });
            });
        </script>
<!-- 加载 highC主js文件 ，-->
<script src="js/highcharts.js"></script>
<!-- 加载 exporting ，是highCharts实现打印，下载图片必须的js文件，如果不需要该功能，可不用-->
<script src="js/exporting.js"></script>
<!-- 新建一个容器，存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
    <div id="highcharts1" style="min-width:400px;height:400px;"></div>

Answer 3

你加载了 2 个 jquery ？
出现冲突了吧？
只在开始处保留一个高版本的

Answer 4

一开始加载一个1.6.2版本的，折线图也不显示，加载了1.10.1.min.js的可以出现折线图，不能显示柱状图。

Answer 5

我的jquery版本
jQuery v1.9.0
2个图都能显示<!-- 加载jquery -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- javascript代码  -->
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '产品预期收益图'
            },
            credits: {
                enabled : false
},
            xAxis: {
                categories: [
                    '本产品收益',
                    '同类型产品',
                    '同期限产品',
                    '同投资方向',
                    '货币基金',
                    '一年期定存',
                    'CPI涨幅'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '收益率 (%)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">收益率: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}&nbsp%</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [ {
                name: '收益比较',
                data: [{'color':'#F6BD0F','y':3.6}, {'color':'#AFD8F8','y':8.8},  {'color':'#8BBA00','y':8.5}, {'color':'#FF8E46','y':3.4},  {'color':'#008E8E','y':6.0},   {'color':'#D64646','y':4.5}, {'color':'#8E468E','y':15.0}]
    
            },]
        });
    });
</script>
<script type="text/javascript">
   $(function () {
                var chart;
                $(document).ready(function() {
                    //定义一个HighCharts
                    chart = new Highcharts.Chart({
                        //配置chart选项
                        chart: {
                        renderTo: 'highcharts1',  //容器名，和body部分的div id要一致
                        type: 'spline'                        //图表类型，这里选择折线图
            },
               //配置链接及名称选项
            credits: {
                enabled : true,
                href : "http://www.52wulian.org",
                text : "浏览总理：291，IP总数：74  -- 我爱物联网"
            },
            //配置标题
            title: {
                text: '我爱物联网 2012/09/22 访问统计',
                y:10  //默认对齐是顶部，所以这里代表距离顶部10px
            },
            //配置副标题
            subtitle: {
                text: '数据来源：百度统计',
                y:30
            },
            //配置x轴
            xAxis: {
                categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12',
                                         '13','14','15','16','17','18','19','20','21','22','23/点']
            },
            // 配置y轴
            yAxis: {
                title: {
                    text: '次数（次）'
                },
                labels: {  
                    formatter: function() {
                        return this.value +'次'
                    }
                }
            },
            //配置数据点提示框
            tooltip: {
                crosshairs: true,
                shared: true
            },
            //配置数据使其点显示信息
            plotOptions: {
                   spline : {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: true
                }
            },
            //配置数据列
            series: [{
                name: '浏览次数（PV）',
                er: {
                    symbol: 'square'
                },
                data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,
                            8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{
                name: 'IP数',
                er: {
                    symbol: 'diamond'
                },
                data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,
                          5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]
            }]
                    });
                });
            });
        </script>
<!-- 加载 highC主js文件 ，-->
<script src="http://www.hcharts.cn/demo/js/highcharts.js"></script>
<!-- 加载 exporting ，是highCharts实现打印，下载图片必须的js文件，如果不需要该功能，可不用-->
<script src="http://www.hcharts.cn/demo/js/exporting.js"></script>
<!-- 新建一个容器，存放在head部分定义的Chart内容 。这里的id一定是chart : {...}内的renderTo的值-->
    <div id="container" style="min-width:700px;height:400px"></div>    <div id="highcharts1" style="min-width:400px;height:400px;"></div>

Answer 6

Quote: 引用 5 楼 liuxingfffff 的回复:

如果不是放到项目中去，我的也有用，就是放我自己的项目当中去，就只会显示折线图，不能显示柱状图。项目中原来有个1.6.2的两个都不能显示，导入1.10.1.min的，就只可以显示折线图

Answer 7

确保项目网页中的文件在浏览器中 是最新的，没有缓存。
查看网页是否有js错误。
查看网页中所有引用的js文件，是否会有对highchart 和 jquery 有影响的js文件。
highchart 版本 和你自己本地的版本 是否一致。
查看你的js代码 是否执行。

Answer 8

不一样，测试，就是用txt文档写的，然后放我项目中去就可以

Answer 9

不知道，反正我是把折线图里面的spline全部换成column，然后改下属性，就完美运行了