Графики 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

я думать вы можете иметь в виду на configuration options для ...

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

hAxis.ticks - Заменяет автоматически генерируемый 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>