Google 차트 : 축의 데이터

Question

이 코드는 원형 차트 이미지가있는 scatterplot을 만듭니다.

분산 점 축에 데이터 행 항목을 표시하는 데 문제가 있습니다.

그 방법을 만드는 데 어떤 아이디어가 있습니까? 내가 생각

많은 감사합니다 :)

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.ticksconfiguration 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>