2013-10-16 53 views
4

我想從highcharts.com得到一個衡量標準,在頁面上工作我已經通過該示例工作,我看不到我做錯了什麼。如果任何人都可以指出正確的方向。jquery調用highcharts生成錯誤17

這裏是我的小提琴

highchart gauge not working

這裏是我的代碼

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 

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

$(document).ready(function(){ 


$(function() { 
$('#container').highcharts({ 

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

    title: { 
     text: 'Speedometer with dual axes' 
    }, 

    pane: { 
     startAngle: -150, 
     endAngle: 150 
    },   

    yAxis: [{ 
     min: 0, 
     max: 200, 
     lineColor: '#339', 
     tickColor: '#339', 
     minorTickColor: '#339', 
     offset: -25, 
     lineWidth: 2, 
     labels: { 
      distance: -20, 
      rotation: 'auto' 
     }, 
     tickLength: 5, 
     minorTickLength: 5, 
     endOnTick: false 
    }, { 
     min: 0, 
     max: 124, 
     tickPosition: 'outside', 
     lineColor: '#933', 
     lineWidth: 2, 
     minorTickPosition: 'outside', 
     tickColor: '#933', 
     minorTickColor: '#933', 
     tickLength: 5, 
     minorTickLength: 5, 
     labels: { 
      distance: 12, 
      rotation: 'auto' 
     }, 
     offset: -20, 
     endOnTick: false 
    }], 

    series: [{ 
     name: 'Speed', 
     data: [80], 
     dataLabels: { 
      formatter: function() { 
       var kmh = this.y, 
        mph = Math.round(kmh * 0.621); 
       return '<span style="color:#339">'+ kmh + ' km/h</span><br/>' + 
        '<span style="color:#933">' + mph + ' mph</span>'; 
      }, 
      backgroundColor: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0, '#DDD'], 
        [1, '#FFF'] 
       ] 
      } 
     }, 
     tooltip: { 
      valueSuffix: ' km/h' 
     } 
    }] 

}, 
// Add some life 
function(chart) { 
    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> 
</head> 

<body> 

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div> 

</body> 

</html> 

回答

10

您對highcharts-more.js鏈接是錯誤的。應該是:

<script src="http://code.highcharts.com/highcharts-more.js"></script> 

http://jsfiddle.net/bhlaird/F6XUT/1/

+0

不要忘了'https' – redolent

+0

@redolent - 我不明白您的評論。如果您的網站不安全,則不必使用https訪問這些庫。 –

0

你可能使用了錯誤的HighChart庫。如果您使用HighCharts而不是HighStock,也會發生該錯誤。

+0

對不起,但量規圖與Highstock和Highcharts完美配合.. –

+0

今天我有這個問題,HighCharts沒有工作,但HighStock做了一定的配置。谷歌搜索錯誤導致我到這個網站。因此,如果其他人也應該遇到同樣的問題,我就會添加我在這裏遇到的問題。我花了幾個小時才弄明白(你必須在某些情況下用HighStock來代替HighCharts) – 0x4a6f4672

+0

你能用Highcharts在jsFiddle上重新創建問題嗎?可能你使用的是舊版本的Highcharts,但最新版本的Highstock。 –

0

有時當你在chart.type值的拼寫錯誤,你得到同樣的錯誤 比如:type: 'colmun'代替type: 'column'