Google Charts：軸のデータ

Question

このコードは、円グラフの画像を含む散布図を作成します。

データ行のエントリをスキャッタプロットの軸に表示する際に問題があります。

これを実現する方法については、

多くの感謝:)

google.charts.load('current', {'packages':['corechart']}); 
     function draw0hedgeChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); 

    data.addRows([ [ 9.87,  6.53], ]); 

     var options = { 
      colors: ['#000000'], 
      legend: 'none', 
       title: 'Risk vs. Return with 0% Hedge Fund', 
       hAxis: {title: 'Risk', minValue: 3, maxValue: 11, gridlineColor: '#fff', direction: -1}, 
       vAxis: {title: 'Return', minValue: 4, maxValue: 10, gridlineColor: '#fff'}, 
       width:900, 
       height:500 
      }; 


     var container = document.getElementById('chart0_div'); 

     var chart = new google.visualization.ScatterChart(container); 

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

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

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

      var widget0 = container.appendChild(document.createElement('img')); 
      widget0.src = 'img/0.png'; 
      widget0.className = 'chart0'; 

      // (overlay the dot) 
      widget0.style.top = (yPos - 50) + 'px'; 
      widget0.style.left = (xPos - 50) + 'px'; 

     } }); 

     chart.draw(data, options); } 

Answer 1

私はあなたが...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks

hAxis.ticksためconfiguration optionsを参照することができる考える- 自動的に生成されたX軸を置き換え指定された配列でティックします。配列の各要素は、有効なティック値（数字、日付、日時、曜日など）である必要があります。

google.charts.load('current', { 
 
    callback: draw0hedgeChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function draw0hedgeChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Y'); 
 
    data.addRows([ 
 
    [9.87, 6.53], 
 
    ]); 
 

 
    var ticksX = []; 
 
    var ticksY = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    ticksX.push(data.getValue(i, 0)); 
 
    ticksY.push(data.getValue(i, 1)); 
 
    } 
 

 
    var options = { 
 
    colors: ['#000000'], 
 
    legend: 'none', 
 
    title: 'Risk vs. Return with 0% Hedge Fund', 
 
    hAxis: { 
 
     title: 'Risk', 
 
     minValue: 3, 
 
     maxValue: 11, 
 
     //gridlineColor: '#fff', 
 
     direction: -1, 
 
     ticks: ticksX 
 
    }, 
 
    vAxis: { 
 
     title: 'Return', 
 
     minValue: 4, 
 
     maxValue: 10, 
 
     //gridlineColor: '#fff', 
 
     ticks: ticksY 
 
    }, 
 
    width:900, 
 
    height:500 
 
    }; 
 

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

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

 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     var xPos = layout.getXLocation(data.getValue(i, 0)); 
 
     var yPos = layout.getYLocation(data.getValue(i, 1)); 
 

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

 
     // (overlay the dot) 
 
     widget0.style.position = 'absolute'; 
 
     widget0.style.top = yPos + 'px'; 
 
     widget0.style.left = xPos + 'px'; 
 
    } 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

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