$（...）。highcharts不是函数

时间：2015-11-13 13:25:58

标签： javascript jquery highcharts

我知道有多次问过相同题目的问题。我查看了多个答案，但没有一个能解决我的错误。

这是我的代码：

标题 

<script src='/javascripts/jQuery-1.11.3.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--<script src='/javascripts/highCharts.js'></script>-->
<script src='http://code.highcharts.com/highcharts.js'></script>

我尝试过CDNing，也来自我的域名（highCharts.js中的代码直接来自http://code.highcharts.com/highcharts.js）

我的插件 我已加载到我的jQuery中，因此不是错误。

加载DOM时 

$(function() {                                           
    buildHighcharts();
});

function buildHighcharts() {
    $('#graph_bar_month').highcharts({
        ....
    });

    $('#graph_line_year').highcharts({
        ...
    });

    $('#graph_bar_teamPercent').highcharts({
        ...
    });

    $('#graph_bar_teamActual').highcharts({
        ...          
    });
}

HTML 

<div class="tab-pane maxHeight" id="show_graph">
    <div class="row maxHeight maxWide">
        <div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
    </div>
</div>

我已经尝试将其降低到只有一个高图，因为多次认为可能导致错误，但没有运气。

尝试将series数据添加到图表中以尝试强制显示但没有运气

这是我的整个头（我看不到错误在这里以外的地方）：

<head>
  <link rel='stylesheet' href='/stylesheets/css/style.css' />
  <link rel='stylesheet' href='/stylesheets/css/tables.css' />
  <link rel='stylesheet' href='/stylesheets/css/jquery.mCustomScrollbar.css' />
  <link rel='stylesheet' href='/stylesheets/css/wrappers.css' />
  <link rel='stylesheet' href='/stylesheets/css/queries.css' />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <script src="/javascripts/jquery-1.10.2.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src='/javascripts/jquery.mCustomScrollbar.concat.min.js'></script>
  <script src='/javascripts/clock.js'></script>
  <script src='/javascripts/fixedHeader.js'></script>
  <!--<script src='/javascripts/customLogin.js'></script>-->
  <script src='/javascripts/customAlert.js'></script>
  <!--<script src='/javascripts/highCharts.js'></script>-->
  <script src='http://code.highcharts.com/highcharts.js'></script>
  <!--<script src='/javascripts/displayCustomScroll.js'></script>-->
  <!--<script src='/javascripts/displayHighcharts.js'></script>-->
  <script>
      (function($) {
          $(window).load(function(){
              $(".bottomWrapperTable").mCustomScrollbar({
                  axis: "y",
                  theme: "dark",
                  scrollbarPosition: "outside",
                  callbacks: {
                      whileScrolling: function(){
                          setScroll(this.mcs.left);
                      },
                      onScroll: function() {
                          setStartEndScroll(this.mcs.leftPct);
                      }
                  }
              });
              setInterval('updateClock()', 1000);
          });
      })(jQuery);

      function buildHighcharts() {
          $('#graph_bar_month').highcharts({
              chart: {
                  renderTo: 'graph_bar_month',
                  type: 'bar'
              },
              title: {
                  text: '**Current Month**'
              },
              xAxis: {
                  categories: ['On Target', 'Below Target', 'Not Entered']
              },
              yAxis: {
                  title: {
                      text: '%'
                  },
                  categories: [0, 50, 100]
              }
          });

          $('#graph_line_year').highcharts({
              chart: {
                  type: 'line'
              },
              title: {
                  text: '**Current Year**'
              },
              xAxis: {
                  categories: ['January', 'February', 'March']
              },
              yAxis: {
                  title: {
                      text: '%'
                  },
                  categories: [0, 50, 100]
              },
              series : [{
                  name: 'Total % On Target',
                  data: [1, 2, 3]
              }, {
                  name: 'Total % Below Target',
                  data: [1, 2, 3]
              }, {
                  name: 'Total % Not Entered',
                  data: [1, 2, 3]
              }]
          });

          $('#graph_bar_teamPercent').highcharts({
              chart: {
                  type: 'bar'
              },
              title: {
                  text: 'Team % On Target'
              },
              xAxis: {
                  title: {
                      text: 'Team'
                  },
                  categories: ['Daimler', 'Mclaren', 'Comms Server']
              },
              yAxis: {
                  categories: [0, 50, 100],
                  title: {
                      text: '%'
                  }
              }
          });

          $('#graph_bar_teamActual').highcharts({
              chart: {
                  type: 'bar'
              },
              title: {
                  text: 'Team % On Target'
              },
              xAxis: {
                  title: {
                      text: 'Team'
                  },
                  categories: ['Daimler', 'Mclaren', 'Comms Server']
              },
              yAxis: {
                  categories: [0, 50, 500]
              }
          });
      }

      $(function() {                                            //$(document).ready()
          var url = window.location.href;
          buildHighcharts();
          if (url.indexOf('?error') != -1) {
              Alert.render('Record no longer exists!\nPlease choose another', 'Oops!');
          }

          $('#createBtn').on('click', function() {
              $('#currProdID').val($('#projDrop').val());
              $('#currMetrics').submit();
          });

          $('#fixed-table-head').on('scroll', function(e, val) {
              if((-val >= 0) && (val < 10000)) {
                  this.scrollLeft = -val;
              } else if (val === 10000) {
                  this.scrollLeft = (this.scrollWidth - this.clientWidth);
              }
          });

          if (document.getElementById('projDrop').value != "") {
              document.getElementById('createBtn').disabled = false;
          }

          $('#projDrop').on('change', function() {
              document.getElementById('createBtn').disabled = false;
          });
      });
  </script>
</head>

[解决]

我的错误是我在调用之前调用了buildHighcharts。

解决方案：在$(window).load()中调用该函数，同时将调用保持在其外部

3 个答案:

答案 0 :(得分：1)

根据最佳做法，在定义之前不应使用函数。

尝试在脚本中输入以下内容：

$(document).ready(function() {                                           
     var buildHighcharts = function() {
          $('#graph_bar_month').highcharts({
              ....
          });

          $('#graph_line_year').highcharts({
              ...
          });

          $('#graph_bar_teamPercent').highcharts({
              ...
          });

          $('#graph_bar_teamActual').highcharts({
              ...          
          });
      }  

      buildHighcharts();       
});

请检查一下！它正在将功能放在正确的位置......

＆＃13;
＆＃13; 
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='http://code.highcharts.com/highcharts.js'></script>
<script>
$(function () { //$(document).ready()
    var buildHighcharts = function () {
        $('#graph_bar_month').highcharts({
            chart: {
                renderTo: 'graph_bar_month',
                type: 'bar'
            },
            title: {
                text: '**Current Month**'
            },
            xAxis: {
                categories: ['On Target', 'Below Target', 'Not Entered']
            },
            yAxis: {
                title: {
                    text: '%'
                },
                categories: [0, 50, 100]
            }
        });

        $('#graph_line_year').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: '**Current Year**'
            },
            xAxis: {
                categories: ['January', 'February', 'March']
            },
            yAxis: {
                title: {
                    text: '%'
                },
                categories: [0, 50, 100]
            },
            series: [{
                name: 'Total % On Target',
                data: [1, 2, 3]
            }, {
                name: 'Total % Below Target',
                data: [1, 2, 3]
            }, {
                name: 'Total % Not Entered',
                data: [1, 2, 3]
            }]
        });

        $('#graph_bar_teamPercent').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Team % On Target'
            },
            xAxis: {
                title: {
                    text: 'Team'
                },
                categories: ['Daimler', 'Mclaren', 'Comms Server']
            },
            yAxis: {
                categories: [0, 50, 100],
                title: {
                    text: '%'
                }
            }
        });

        $('#graph_bar_teamActual').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Team % On Target'
            },
            xAxis: {
                title: {
                    text: 'Team'
                },
                categories: ['Daimler', 'Mclaren', 'Comms Server']
            },
            yAxis: {
                categories: [0, 50, 500]
            }
        });
        console.log($.fn.highcharts)
    }

    buildHighcharts();
});
</script>
</head>
<body>
  <div class="tab-pane maxHeight" id="show_graph">
    <div class="row maxHeight maxWide">
        <div id="graph_bar_month" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_line_year" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamActual" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
        <div id="graph_bar_teamPercent" class="col-lg-6 col-md-6 col-sm-6 halfHeight"></div>
    </div>
</div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

从他们的文件：

http://www.highcharts.com/documentation/compatibility

  

的jQuery

     
      
  • 1.4.3 - 1.10.x适用于所有浏览器。
    •   
  • 2.0.x适用于现代浏览器。
    •   
     

MooTools 1.2.5 - 1.4.5

     

原型1.7

您没有使用受支持的jQuery版本和highcharts。这是你的实际问题吗？我不知道。切换到jQuery 1.10并查看它是否加载。如果确实如此，那么我们就会发现你的问题。如果没有，那么你需要了解为什么没有正确加载JavaScript文件。

现在是什么导致文件无法加载？

  • 文件路径是否正确？检查网络选项卡以查看是否加载
  • 是阻止文件的浏览器插件吗？检查网络选项卡以查看是否加载
  • 您是否在页面上多次包含jQuery？您应该只在页面上显示一次，这可能会导致插件出现问题

答案 2 :(得分：0)

use `var chart = new Highcharts.Chart({`
instead of `$('#container').highcharts({`

or possible solution would be order of jquery and highchart script
it should be 

    <script src="js/jquery-2.0.2.min.js"></script>  
        <script src="js/highcharts.js"></script>  
        <script src="js/drilldown.js"></script>
相关问题
最新问题