HighChart 气泡图不起作用

Question

我正在使用 Highcharts 从 googlespreadsheet 绘制图表。我已经编写了如下代码。谷歌电子表格密钥如下：

1eKSDvJYgNBVWTbmD813OTBCoz2FB6wpxcwgveVRaQn8

它适用于折线图，但不适用于气泡图。请帮忙。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com 
/jquery-.9.1.js">       </script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<title>Highcharts Demo</title> 
<script type='text/javascript'>//<![CDATA[
$(function () {
$('#container').highcharts({

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy',

    },

    title: {
        text: 'Highcharts bubbles with radial gradient fill'
    },

    xAxis: {
        gridLineWidth: 1
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false
    },

    series: [{
        data: {googleSpreadsheetKey: '1eKSDvJYgNBVWTbmD813OTBCoz2FB6wpxcwgveVRaQn8'},
        marker: {
            fillColor: {
                radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                stops: [
                    [0, 'rgba(255,255,255,0.5)'],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                ]
            }
        }
    }]

});
});
//]]> 

</script>


</head>

<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

</body>

</html>

Answer 1

我更改了 DATA: 对象的位置，它对我有用。下面是工作代码。

<!DOCTYPE html>
<html>
<head>
   
  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type="text/css">
    
  </style>

  <title>Puneeth's Assignment</title> 
<script type='text/javascript'>//<![CDATA[

$(function () {
    $('#container').highcharts({
       
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy',
           
        },

        title: {
            text: 'Puneeths Assignment'
        },

        xAxis: {
            gridLineWidth: 1
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false
        },
        data: {googleSpreadsheetKey: '1nacibKQ5YVgbkp7ElsLxF0x3PDNOjvKKV8dpG0kWnns'},

        series: [{
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }]

    });
});
//]]> 
 
</script>

  
</head>

<body>
  <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

</html>