如何将此 JSFiddle 代码实现到我的页面？

Question

这可能是一个非常新手的问题，但我正在尝试从以下 Highcharts JSFiddle 页面复制（而不是嵌入）代码：http://jsfiddle.net/3cr2yebq/9/

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

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

highcharts.js:309 未捕获的类型错误：无法读取未定义的属性 'addEvent'

highcharts-more.js:8 未捕获的类型错误：l.getOptions 不是函数

实心-gauge.js:9 未捕获的类型错误：a.getOptions 不是函数

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

HTML 来自 fiddle:

<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>

进入您的网站。希望对您有所帮助。

如何将此 JSFiddle 代码实现到我的页面？

How to implement this JSFiddle code to my page?

html

javascript

highcharts

jsfiddle