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>