Fatal编程技术网
  • javascript/
  • Javascript 为什么我的3个Highcharts饼图/图中只有2个显示

Javascript 为什么我的3个Highcharts饼图/图中只有2个显示

javascript jquery highcharts

Javascript 为什么我的3个Highcharts饼图/图中只有2个显示,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我不明白为什么我的图表在上传到jfiddle时显示得很好，然而，在我的实际页面中，只有三个图表中的两个显示出来 我错过什么了吗？我所有的javascript代码和标记都已关闭。我完全搞不懂这个。您可以在下面的JSFIDLE中看到我的代码： 这是我的整个HTML页面。。。我不明白为什么我的图表不会显示，但在JSFIDLE中显示得很好： <html> <head> <meta http-equiv="Content-Type" content="text/html; c

我不明白为什么我的图表在上传到jfiddle时显示得很好，然而，在我的实际页面中，只有三个图表中的两个显示出来

我错过什么了吗？我所有的javascript代码和标记都已关闭。我完全搞不懂这个。您可以在下面的JSFIDLE中看到我的代码：

这是我的整个HTML页面。。。我不明白为什么我的图表不会显示，但在JSFIDLE中显示得很好：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graphs & Charts</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
// JavaScript Document
$(function () {

    Highcharts.setOptions({
 colors: ['#6eb5ec', '#d64646', '#8bba00', '#f6bd0f', '#cd5ace', '#f19153', '#cccccc', '#cd8b49']
});

    var chart;  

        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                events: {
                    load: function(event) {
                        console.log(this);
            }
        }     
            },
                legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                floating: true,
                x: 365,
                y: 260,
                itemStyle: {
                    color: '#000000',
                    fontWeight: 'normal',
                    fontSize: '11px'
                    }
            },
             title: {
                text: '2012 Revenue Report'
            },
                tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true
                    },
                    showInLegend: true,
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false; // <== returning false will cancel the default action
                                }
                            }   
                        }   
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Govt<br/>Contracts<br/>& Grants',   45.0],
                    ['Private<br/>Grants/Gifts',       26.8],
                    {
                        name: 'Net Tuition<br/>& Fees',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Auxiliary<br/>Enterprises',    8.5],
                    ['Investments',     6.2],
                    ['Dental Clinic',   0.7],
                    ['Other',   0.7]
                ]
            }]

        });
    });



       // ENDOWMENT BAR GRAPH
       chart = new Highcharts.Chart({
            chart: {
                renderTo: 'endowment',
                type: 'column',
                events: {
                        load: function(event) {
                            console.log(this);
            }
        }     
            },
            title: {
                text: '2012 Financial Endowment Report'
            },
            subtitle: {
                text: 'Periods ending June 30th'
            },
            xAxis: {
                categories: [
                    'Reporting Year'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Millions (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 85,
                y: 50,
                floating: true,
                shadow: true
            },
            showInLegend: true,
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false; // <== returning false will cancel the default action
                                }
                            }   
                        },  
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true
                    },
                    showInLegend: true,
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false; // <== returning false will cancel the default action
                                }
                            }   
                        }

                }
            },
                series: [{
                name: 'Yr 2011',
                data: [49.9]

            }, {
                name: 'Yr 2012',
                data: [83.6]

            }]

        });


       // EXPENSES CHART
              chart = new Highcharts.Chart({
          chart: {
             renderTo: 'expenses',
             plotBackgroundColor: null,
             plotBorderWidth: null,
             plotShadow: false
          },
          title: {
             text: 'This will be a pie chart',
             style: {
                Color: '#666'
             }
          },
          tooltip: {
             formatter: function() {
                return '<strong>'+ this.point.name +'</strong>: '+ this.y +' %';
             }
          },
          plotOptions: {
             pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                   enabled: true
                },
                showInLegend: true
             }
          },
          showInLegend: true,
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false; // <== returning false will cancel the default action
                                }
                            }   
        },  
          series: [{
             type: 'pie',
             name: 'Our Current Expenses',
             data: [
                ['Expense1', 26.9],
                ['Expense2', 27.7],
                ['Expense3', 45.3],
                {
                   name: 'Other',
                   y: 32.2,
                   sliced: true,
                   selected: true
                }
             ]
          }],
          legend: {
             borderColor: '#666'
          }
       });
</script>
</head>

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

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

<div id="endowment" style="min-width: 400px; height: 400px; margin: 0 auto"></div>​
</body>
</html>


图表
//JavaScript文档
$（函数（）{
Highcharts.setOptions({
颜色：[“6eb5ec”、“d64646”、“8bba00”、“f6bd0f”、“cd5ace”、“f19153”、“CCCC”、“cd8b49”]
});
var图；
//绘制图表
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
活动：{
加载：函数（事件）{
console.log（this）；
}
}     
},
图例：{
布局：“垂直”，
背景颜色：“#FFFFFF”，
对齐：“左”，
垂直排列：“顶部”，
浮动：是的，
x:365，
y:260，
项目样式：{
颜色：'#000000'，
fontWeight:'正常'，
字体大小：“11px”
}
},
标题：{
正文：“2012年收入报告”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage}%”，
百分比小数：1
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：true
},
showInLegend：是的，
要点：{
活动：{
legendItemClick:函数（）{

return false；//我不知道你为什么需要这个


$(document).ready(function () { 


在您的javascript中。我可以看到您已经在初始化文档就绪上的事件，因此这是reduntant，可能导致您面临的问题。请尝试不使用它


这边走
我不知道你为什么需要这个


$(document).ready(function () { 


在您的javascript中。我可以看到您已经在初始化文档就绪上的事件，因此这是reduntant，可能导致您面临的问题。请尝试不使用它


通过这种方式，我看到了各种问题。首先，尝试在所有其他脚本之前包含jQuery。声明它依赖于jQuery、MooTools或Prototype。这可能在JSFIDLE中起作用，因为默认情况下它会将jQuery加载到浏览器中

第二，您应该将所有图表创建放在$（document）.ready（function（）{}）块中。只有您的收入图表在该块中被初始化


看一看在
上的一个稍微修改过的独立工作版本，我看到了各种问题。首先，尝试在所有其他脚本之前包含jQuery。声明它依赖于jQuery、MooTools或Prototype。这可能在JSFIDLE中起作用，因为默认情况下它会将jQuery加载到浏览器中

第二，您应该将所有图表创建放在$（document）.ready（function（）{}）块中。只有您的收入图表在该块中被初始化


在控制台部分检查是否有错误如果你的标记不是太大，我建议将它发布在这里或链接到真实的站点。很难诊断一段工作代码。不知道，正如你所看到的，尝试调试你的代码。我刚刚用我的整个HTML更新了我的文章年龄。请看一看，并告诉我你的想法，为什么我的图表在JSFIDLE中显示得很好，而不是在我上传到我的服务器时显示得很好！？在控制台部分检查错误如果你的标记不是太大，我建议将它发布在这里或链接到真实的站点。很难诊断一段工作代码。不知道，正如你所看到的，尝试去bug你的代码。我刚刚用我的整个HTML页面更新了我的帖子。请看一看，并告诉我你的想法，为什么我的图表在JSFIDLE中显示得很好，而不是在我上传到我的服务器时显示得很好！？嗯……它怎么可能在JSFIDLE中工作而不是在我的文档中。我只是从JSFIDLE复制并粘贴了代码，但它仍然不工作！嗯嗯…难住了！我刚刚用我的整个HTML页面更新了我的帖子。请看一看，告诉我你的想法，为什么我的图表在JSFIDLE中显示得很好，而不是在我上传到服务器时显示得很好！？嗯…它怎么可能在JS FIDLE中工作而不是在我的文档中。我只是从JSFIDLE复制并粘贴了代码，但它仍然不工作！嗯嗯……难住了！我刚刚用我的整个HTML页面更新了我的帖子。请看一看，告诉我为什么我的图表在JSFIDLE中显示得很好，而不是在我上传到服务器时显示得很好！？@MizAkita，如果这个答案解决了你的问题，请接受它（单击旁边的复选标记）。获取有关接受答案如何在stackoverflow上工作的完整解释。确认这是正确的答案。当我复制一些现有工作代码并将jquery更新为新版本时，出现了相同的问题，将其放在highcharts.js的下方。一旦jquery放在highcharts.js之前，它就会重新开始工作。@MizAkita，如果这是wer已修复您的问题，请接受它（单击它旁边的复选标记）。获取有关接受答案如何在stackoverflow上工作的完整解释。确认这是正确的答案。当我复制一些现有工作代码并将jquery更新为新版本时，出现了相同的问题，将其放置在highcharts.js下面。一旦jquery放在highcharts.js之前，它又开始正常工作。