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/ Yep, jQuery отсутствует –

@Satyajit - спасибо за это, как вы можете сказать, я полный нуб с этим материалом. Я добавил следующие строки в 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 пример не отображается

ответ

Смежные вопросы