javascript - $(...).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>

我已经尝试过 CDN 以及来 self 的域的内容(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>

我尝试将其缩减为只有一个 Highcharts ，因为我认为多个图表可能会导致错误，但没有运气。

已尝试将系列数据添加到图表中以尝试强制其显示，但没有成功

这是我的整个头(除了这里我看不到错误在其他地方):

<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() 中调用该函数，同时将调用保留在其外部

最佳答案

根据最佳实践，您不应在定义函数之前使用它。

尝试在脚本中添加如下内容:

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

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

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

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

      buildHighcharts();       
});

请检查一下!它正在将函数放在正确的位置......

<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>

关于javascript - $(...).highcharts 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33693790/

javascript - $(...).highcharts 不是函数

上一篇：javascript - ng-file-upload 执行 setRequestHeader 失败

下一篇：javascript - 成对火灾事件