如何在Google图表中显示正标签而不是负标签?

时间:2019-03-04 13:43:16

标签: javascript jquery charts google-visualization

我正在使用Google Charts生成简单的散点图。我有很多要点,我只想将hAxis设置为正。目前有一个列表[0,20,40,60,80,100,-20,-40,-60,-80,-100]等

我想显示所有点,但带有自定义hAxis标签,例如:[0,20,40,60,80,100,0,20,40,60,80,100]

我想让自己的图表看起来像自爆

scatter chart

但目前我的散点图看起来像

current chart

function drawChart() {
  // Define the chart to be drawn.
  var data = new google.visualization.DataTable();
  data.addColumn('number', '');
  data.addColumn('number', '');
  data.addRows([
    [ -0.5,1],
    [100,1],
    [-80,2],
    [25,2],
    [-20,3],
    [40,3],
    [-0.5,4],
    [80,4],
    [-40,5],
    [20,5],
    [-0.5,6],
    [80,6],
    [-10,7],
    [90,7],
    [-70,8],
    [60,8],
  ]);

  // Set chart options
 var options = {
              title: 'guilt experience Vs eat satisfaction',
              titlePosition: 'none',
              position:'center',
            hAxis: {title: '', minValue: 0, maxValue: 15,ticks: [0,20,40,60,80,100,-20,-40,-60,-80,-100]},

            vAxis: {title: '', minValue: 0, ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8]},
            legend: {position: 'none'},

          };

  // Instantiate and draw the chart.
 var container = document.getElementById('chart_div');
            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  
  google.visualization.events.addListener(chart, 'ready', function () {
                var layout = chart.getChartLayoutInterface();
              
                for (var i = -0; i < data.getNumberOfRows(); i++) {
                  // add image above every fifth element

                    var xPos = layout.getXLocation(data.getValue(i, 0));
                    var yPos = layout.getYLocation(data.getValue(i, 1));
         
                    var zPos = 20;
                    //var yPos = layout.getYLocation(data.getValue(i, 1));
                    var whiteHat = container.appendChild(document.createElement('img'));
                    var experience  = container.appendChild(document.createElement('img'));
                    if(data.getValue(i, 0) < 0){
                        whiteHat.src = 'https://i.imgur.com/LqiTeQI.png';
                    }else{
                        whiteHat.src = 'https://i.imgur.com/rACTObW.png';
                    }
                    
                    if(i % 3 == 0){
                        experience.src = 'https://i.imgur.com/X286vZE.png';
                    }else{
                        experience.src = 'https://i.imgur.com/WHGsnvZ.png';
                    }
                    
                    whiteHat.style.position = 'absolute';
                    whiteHat.style.height = '15px';
                    whiteHat.style.width = '15px';
                    
                    experience.style.position = 'absolute';
                    experience.style.height = '16px';
                    experience.style.width = '16px';
                    
                    // 16x16 (image size in this example)
                    whiteHat.style.top = (yPos) + 'px';
                    whiteHat.style.left = (xPos) + 'px';
                    experience.style.top = (yPos) + 'px';
                    experience.style.left = (zPos) + 'px';

                }
              });
  chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
  google.charts.load('current', {
    packages: ['corechart', 'scatter']
  });
</script>
<div id="chart_div" ></div>

我想将haxis负标签显示为正标签

0 个答案:

没有答案