highcharts bubble不会加载

时间:2014-04-02 09:29:08

标签: javascript highcharts

我在其官方网站上使用Highcharts Bubble作为示例,并尝试使用Framework CodeIgniter对其进行修改。 我在GoogleChrome和Firefox中运行它但没有显示任何内容。 这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>STATISTIK</title>

</head>

<link href="http://10.16.107.77/statistik/public/css/main.css" rel="stylesheet">

<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery.validate.js"></script>

<style>
#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 10px;
}
</style>
<body>
<div id="content">
</div>
<!--link rel="stylesheet" type="text/css" href="http://10.16.107.77/statistik/public/css/CreativeCSS3AnimationMenus/css/demo.css" /-->
<script src="http://10.16.107.77/statistik/public/jquery/highcharts.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/highcharts-more.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
    $('#container').highcharts({

        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },

        title: {
            text: 'Formasi Tenaga Kerja'
        },
        series: [{
            data: [[97,36,1000]],
            name: 'Area Medan'
        }, {
            data: [[25,10,1000]],
            name: 'Area Lubuk Pakam'
        }, {
            data: [[47,47,1000]],
            name: 'Area Binjai'
        }, {
            data: [[75,80,1000]],
            name: 'Area Sibolga'
        }, {
            data: [[60,25,1000]],
            name: 'Area Rantau Prapat'
        }, {
            data: [[100,80,1000]],
            name: 'Area Padang Sidempuan'
        }, {
            data: [[80,55,1000]],
            name: 'Area Nias'
        }, {
            data: [[75,80,1000]],
            name: 'Area Pematang Siantar'
        }]

    });

});
</script></body>
</html>

每个回复都有。 问候

1 个答案:

答案 0 :(得分:4)

尝试导入highcharts-more.js文件。 看看这里的工作示例: DEMO

代码: 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/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>