如何实现这个JSFiddle代码到我的页面？

Question

这可能是一个非常新手的问题，但我想从以下Highcharts的jsfiddle页复印件（未嵌入）代码：http://jsfiddle.net/3cr2yebq/9/

我的页面是一个基本的HTML5页面。我已经从顶部复制了html代码，并将Javascript放到了我的页面里面。它似乎并没有工作。甚至在一个空的HTML页面中尝试过它，但它不起作用。

当我检查我的网页使用调试器，我得到了这些错误：

highcharts.js：309 遗漏的类型错误：无法读取的不确定

highcharts-更多财产 '的addEvent'。 JS：8 未捕获的类型错误：l.getOptions不是函数

固体gauge.js：9 UNCA ught类型错误：a.getOptions不是一个函数

gauge.php：10 未捕获的ReferenceError：$没有定义

从小提琴HTML：

<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/solid-gauge.js"></script> 
<div style="width: 600px; height: 400px; margin: 0 auto"> 
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div> 
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div> 
</div> 

这里是JavaScript的：

$(function() { 

var gaugeOptions = { 

    chart: { 
     type: 'solidgauge' 
    }, 

    title: null, 

    pane: { 
     center: ['50%', '85%'], 
     size: '140%', 
     startAngle: -90, 
     endAngle: 90, 
     background: { 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#FFF', 
      innerRadius: '60%', 
      outerRadius: '100%', 
      shape: 'arc' 
     } 
    }, 

    tooltip: { 
     enabled: false 
    }, 

    // the value axis 
    yAxis: { 
     stops: [ 
      [0.1, '#8dc63f'], // green 
      [0.5, '#8dc63f'], // yellow 
      [0.9, '#8dc63f'] // red 
      ], 
     lineWidth: 0, 
     minorTickInterval: null, 
     tickPixelInterval: 400, 
     tickWidth: 0, 
     title: { 
      y: -70 
     }, 
     labels: { 
      y: 16 
     } 
    }, 

    plotOptions: { 
     solidgauge: { 
      dataLabels: { 
       y: 5, 
       borderWidth: 0, 
       useHTML: true 
      } 
     } 
    } 
}; 

// The speed gauge 
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { 
    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      text: 'Press' 
     } 
    }, 

    credits: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Press', 
     data: [83], 
     dataLabels: { 
      format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#151515') + '">{y}</span><br/>' + 
       '<span style="font-size:12px;color:silver">%</span></div>' 
     }, 
     tooltip: { 
      valueSuffix: ' km/h' 
     } 
    }] 

})); 

// The RPM gauge 
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, { 
    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      text: 'Youtube' 
     } 
    }, 

    series: [{ 
     name: 'Youtube', 
     data: [83], 
     dataLabels: { 
      format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#151515') + '">{y}</span><br/>' + 
       '<span style="font-size:12px;color:silver">%</span></div>' 
     }, 
     tooltip: { 
      valueSuffix: ' revolutions/min' 
     } 
    }] 

})); 

}); 

在此先感谢您花时间看看问题！

Answer 1

您是否已将JQuery导入到您的网站？它看起来好像代码需要它。您可以添加它通过把这段代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

在您的网站上。希望有所帮助。