基本Javascript：如何在Highcharts示例中链接HTML和Javascript？

Question

I'm sorry for the basic question but I googled around and I couldn't get my simple task working. 对于基本问题，我感到抱歉，但是我四处搜寻，无法完成我的简单任务。

I wanted to implement the Pie Chart Gradient example of Highcharts ( http://www.highcharts.com/demo/pie-gradient ), so I copy the javascript into a piechart_gradient.js : 我想实现Highcharts（ http://www.highcharts.com/demo/pie-gradient ）的饼图渐变示例，所以我将javascript复制到piechart_gradient.js ：

$(function () {

        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });

Then I place the given HTML lines into my web server's index.php , along with an extra line to include the local javascript: 然后，将给定的HTML行放入Web服务器的index.php ，并在其中添加一行以包含本地javascript：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="piechart_gradient.js"></script>

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

And I just get a blank page. 我只是得到一个空白页。 Shouldn't there be a single pie chart on localhost ? localhost上不应该有一个饼图吗？

EDIT: New HTML index.php : 编辑：新的HTML index.php ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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

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

Same results still , getting a blank page on localhost 结果仍然相同 ，在localhost上获得空白页

Answer 1

you are missing references to jquery 您缺少对jquery引用

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

look at this DEMO 看这个演示

AH HAAAAA AH HAAAAA

i know what your are doing 我知道你在做什么

you copied and past jquery reference after the Highcharts right?! 您在Highcharts之后复制并通过了jquery参考，对吗？ you need the jquery at the top 你需要顶部的jquery

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Answer 2

You are missing a reference to jQuery. 您缺少对jQuery的引用。 You should include that as well. 您也应该包括在内。

EDIT: You need to include jQuery before highcharts. 编辑：您需要在highcharts之前包含jQuery。

基本Javascript：如何在Highcharts示例中链接HTML和Javascript？

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-01-21 19:32:43

解决方案2
0 2014-01-21 19:32:59

基本Javascript：如何在Highcharts示例中链接HTML和Javascript？

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-01-21 19:32:43

解决方案2 0 2014-01-21 19:32:59

解决方案1
3 已采纳 2014-01-21 19:32:43

解决方案2
0 2014-01-21 19:32:59