2013-12-12 7 views
0

У меня есть диаграммы, работающие до этого, однако теперь они не хотят появляться. Я пытаюсь использовать калибр.Highcharts Gauge не отображается

Это то, что в заголовке:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

Это PHP:

echo "<div id='graph_one' style='width:30%; height:200px; float:left;'></div> 
<script type='text/javascript'> 

$(function() { 

$('#graph_one').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); 
    } 
    }); 
}); 

</script>"; 
+0

Почему вы эхом отзываете html/js ?? И, может быть, если это не слишком много усилий для вас, вы должны добавить некоторую информацию об ошибках и т. Д. «Не появляется» не очень полезно – strauberry

+0

Это ошибка javascript - как я могу отобразить это? –

+0

У Chrome и Firefox есть панели инструментов разработчика с большим количеством информации. Там у вас есть консоль JS, отображающая всю информацию об ошибке. – strauberry

ответ

0

Честно говоря, я открываю свой пример в форме, и все работает нормально, но вы используете какой-либо веб сервер? Потому что php-файлы не могут быть открыты без этого.

+0

Я использую ее в прямом эфире на хосте ... Я недоумеваю, почему он не работает, потому что я работал над ним на одном и том же хосте. , –

+0

У вас есть демо-версия на вашем сервере? –

0

Дайте ссылку на javascript локально. Иногда бывает, что ссылка не берется непосредственно из Интернета. Сохраните jquery.min.jshighcharts.jshighcharts-more.js и exporting.js локально в вашей системе и укажите путь к сохраненному файлу.

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