HighChart氣泡圖不起作用

我使用Highcharts從googlespreadsheet繪製圖表。我已經編寫了如下代碼。在谷歌電子表格關鍵是如下：HighChart氣泡圖不起作用

1eKSDvJYgNBVWTbmD813OTBCoz2FB6wpxcwgveVRaQn8

它適用於折線圖，但不適合BubbleChart中。請幫忙。

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

來源

2016-05-15 Nash

固定演示：http://jsfiddle.net/84vzwnfr/ –

我改變了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>

來源

2016-05-17 05:12:47 Nash

HighChart氣泡圖不起作用

回答

相關問題