Question

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

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

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

highcharts.js：309 未捕获的TypeError：无法读取未定义的属性“addEvent”

highcharts-more.js：8 未捕获的TypeError：l.getOptions不是函数

固体gauge.js：9 未捕获的TypeError：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>

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

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

1 个答案: