Highcharts Gauge示例不顯示

我正在嘗試使用股票標準Highcharts Gauge示例，並且我不斷收到空白頁。當我將代碼複製回jsfiddle時 - 我仍然得到一個空白頁！（奇怪的部分是我從jsfiddle首先複製了示例中的代碼！）Highcharts Gauge示例不顯示

有人可以告訴我發生了什麼事嗎？

鏈接到我的測試頁面在這裏：Test page

的jsfiddle頁面在這裏：jsfiddle

當我看在控制檯我得到以下錯誤：

Uncaught TypeError: Cannot read property 'addEvent' of undefined

Uncaught TypeError: k.getOptions is not a function

Uncaught TypeError: Cannot read property 'fireEvent' of undefined

Uncaught ReferenceError: $ is not defined

$(function() { 

$('#gauge_container').highcharts({ 

    chart: { 
     type: 'gauge', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false 
    }, 

    title: { 
     text: 'Speedometer' 
    }, 

    pane: { 
     startAngle: -150, 
     endAngle: 150, 
     background: [{ 
      backgroundColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, '#FFF'], 
        [1, '#333'] 
       ] 
      }, 
      borderWidth: 0, 
      outerRadius: '109%' 
     }, { 
      backgroundColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, '#333'], 
        [1, '#FFF'] 
       ] 
      }, 
      borderWidth: 1, 
      outerRadius: '107%' 
     }, { 
      // default background 
     }, { 
      backgroundColor: '#DDD', 
      borderWidth: 0, 
      outerRadius: '105%', 
      innerRadius: '103%' 
     }] 
    }, 

    // the value axis 
    yAxis: { 
     min: 0, 
     max: 200, 

     minorTickInterval: 'auto', 
     minorTickWidth: 1, 
     minorTickLength: 10, 
     minorTickPosition: 'inside', 
     minorTickColor: '#666', 

     tickPixelInterval: 30, 
     tickWidth: 2, 
     tickPosition: 'inside', 
     tickLength: 10, 
     tickColor: '#666', 
     labels: { 
      step: 2, 
      rotation: 'auto' 
     }, 
     title: { 
      text: 'km/h' 
     }, 
     plotBands: [{ 
      from: 0, 
      to: 120, 
      color: '#55BF3B' // green 
     }, { 
      from: 120, 
      to: 160, 
      color: '#DDDF0D' // yellow 
     }, { 
      from: 160, 
      to: 200, 
      color: '#DF5353' // red 
     }] 
    }, 

    series: [{ 
     name: 'Speed', 
     data: [80], 
     tooltip: { 
      valueSuffix: ' km/h' 
     } 
    }] 

}, 
// Add some life 
function (chart) { 
    if (!chart.renderer.forExport) { 
     setInterval(function() { 
      var point = chart.series[0].points[0], 
       newVal, 
       inc = Math.round((Math.random() - 0.5) * 20); 

      newVal = point.y + inc; 
      if (newVal < 0 || newVal > 200) { 
       newVal = point.y - inc; 
      } 

      point.update(newVal); 

     }, 3000); 
    } 
}); 

});

來源

2015-08-17 SESupply

您已經添加了jQuery腳本引用？ – Satyajit

http://jsfiddle.net/9eybsrsy/1/是的，jQuery缺失 –

@Satyajit - 謝謝你，因爲你可以告訴我這是一個完整的noob。我已將以下幾行添加到html，但我仍然得到相同的結果！你能告訴我如何添加jQuery腳本引用嗎？ – SESupply

壓力錶沒有定義

<script src="../Assets/JS/nprogress.js"></script> 
 
    <script src="../Assets/JS/Chart.min.js"></script> 
 
    <script src="../Assets/JS/gauge.min.js"></script> 
 
    <script src="../Assets/bootstrap/bootstrap-progressbar.min.js"></script> 
 
    <script src="../Assets/JS/icheck.min.js"></script> 
 
    <script src="../Assets/JS/skycons.js"></script> 
 

 
    <script src="../Assets/JS/jquery.flot.js"></script> 
 
    <script src="../Assets/JS/jquery.flot.pie.js"></script> 
 
    <script src="../Assets/JS/jquery.flot.time.js"></script> 
 
    <script src="../Assets/JS/jquery.flot.stack.js"></script> 
 
    <script src="../Assets/JS/jquery.flot.resize.js"></script> 
 

 
    <script src="../Assets/JS/jquery.flot.orderBars.js"></script> 
 
    <script src="../Assets/JS/jquery.flot.spline.min.js"></script> 
 
    <script src="../Assets/JS/curvedLines.js"></script> 
 

 
    <script src="../Assets/JS/date.js"></script> 
 

 
    <script src="../Assets/JS/jquery.vmap.js"></script> 
 
    <script src="../Assets/JS/jquery.vmap.world.js"></script> 
 
    <script src="../Assets/JS/jquery.vmap.sampledata.js"></script> 
 

 

 
    <script src="../Assets/JS/moment.min.js"></script> 
 
    <script src="../Assets/JS/daterangepicker.js"></script> 
 

 
    <script src="../Assets/JS/custom.min.js"></script> 
 
    
 
    
 
    that is code that i am using in asp.net web form. 
 
     <!-- gauge.js --> 
 
    <script> 
 
     var opts = { 
 
      lines: 12, 
 
      angle: 0, 
 
      lineWidth: 0.4, 
 
      pointer: { 
 
       length: 0.75, 
 
       strokeWidth: 0.042, 
 
       color: '#1D212A' 
 
      }, 
 
      limitMax: 'false', 
 
      colorStart: '#1ABC9C', 
 
      colorStop: '#1ABC9C', 
 
      strokeColor: '#F0F3F3', 
 
      generateGradient: true 
 
     }; 
 
     var target = document.getElementById('foo'), gauge = new Gauge(target).setOptions(opts); 
 
     gauge.maxValue = 6000; 
 
     gauge.animationSpeed = 32; 
 
     gauge.set(3200); 
 
     gauge.setTextField(document.getElementById("gauge-text")); 
 
    </script>

來源

2016-08-04 07:09:12

這是SESupply提出的問題的解決方案嗎？ –

Highcharts Gauge示例不顯示

回答

相關問題