Google Charts：散布図の点を円グラフで置き換えることは可能ですか？

Question

Google Chartsを使ってインタラクティブなウィジェットを作成しています。

今のところ、以下のように円グラフと散布図があります。

を散布して代わりに青い小さなドットの円グラフを持っていると思います、が（でもイメージすることができます。

これを行う方法の内の任意のアイデアを？

は研究をして4時間を過ごし、私はそれをやらせることは何も見つかりませんでした。

Answer 1

いくつかのデバッグ？

SCRIPT

<script src="https://www.gstatic.com/charts/loader.js"></script> 

////Callback that draws the scatter 

     function draw0RiskChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Risk in %', 'Return in %'], 
     [ 9.87,  6.53] 
    ]); 

    var options = { 
     title: 'Risk vs. Return with 0% Hedge Fund', 
     hAxis: {title: 'Risk', minValue: 5, maxValue: 10}, 
     vAxis: {title: 'Return', minValue: 5, maxValue: 10}, 
     width:400, 
     height:300 
    }; 

    var container = new google.visualization.ScatterChart(document.getElementById('0risk_chart_div')); 
    var chart = new google.visualization.ScatterChart(container); 


    // Wait for the chart to finish drawing before calling the getImageURI() method. 

     google.visualization.events.addListener(chart, 'ready', function() { 
      var layout = chart.getChartLayoutInterface(); 

      container.innerHTML = '<img src="' + chart.getImageURI() + '">'; 

      for (var i = 0; i < data.getNumberOfRows(); i++) { 

      // add image above in every element 

       var xPos = layout.getXLocation(data.getValue(i, 0)); 
       var yPos = layout.getYLocation(data.getValue(i, 1)); 

       var whiteHat = container.appendChild(document.createElement('img')); 
       whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png'; 
       whiteHat.className = 'whiteHat'; 

       // 16x16 (image size in this example) 
       whiteHat.style.top = (yPos - 16) + 'px'; 
       whiteHat.style.left = (xPos) + 'px'; 

      } 

      console.log(container.innerHTML); 
     }); 



    chart.draw(data, options); 
    } 

STYLE

.whiteHat { 
    border: none; 
    position: absolute; 
} 

BODY

<div id="0risk_chart_div"></div>