Question

我的数据在折线图上的间隔始终为0.25。我永远不会有像100.14这样的观点。它总是数字，如100,100.25,1.005,500,680.50

但是当图表被抽到时，我会得到vAxis数字，例如1.1或2.4，当这些值永远不会是＆＃34;点＆＃34;在图表上。

我想只显示0.25的倍数......或者只显示vAx上的实际点而不是＆＃34;填充＆＃34;两点之间的分数。

我目前有这些选项

  var options = {"title":"#{chart_title}",
                 "colors":["#0088cc"],
                 "titleTextStyle": {
                     color: "#0088cc",    
                     fontName: "Verdana",
                     fontSize: 24, 
                     bold: true,    
                     italic: false   
                  },
                  "hAxis": { 
                             "textStyle": {
                               "fontSize": 14,
                               bold: true
                             }

                            },
                  "vAxis": { 
                             "textStyle": {
                               "fontSize": 18,
                               bold: true 
                             }

                            }          

                 };

是否可以强制Google图表在vAxis上始终显示0.25的倍数？

或者甚至vAxis只需要线图上实际点的标签。这可能吗？

Answer 1

您可以使用vAxis.ticks选项设置特定的轴标签......

vAxis: {
  ticks: [0, 0.25, 0.50, 0.75, 1, ...]
}

动态构建标签，在数据表上使用getColumnRange方法，

var dataRange = data.getColumnRange(1);

返回具有min和max

属性的对象

使用值构建ticks数组...

var vTicks = [];
for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval) {
  vTicks.push(i);
}

（将interval添加到max，以便在顶部留出一点额外空间）

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y');
    data.addRows([
      [0, 0],
      [1, 0.25],
      [2, 1.25],
      [3, 2.75],
      [4, 3.50],
      [5, 2.25],
      [6, 1.75],
      [7, 0.50]
    ]);

    var interval = 0.25;
    var dataRange = data.getColumnRange(1);

    var vTicks = [];
    for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval) {
      vTicks.push(i);
    }

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);

    var options = {
      chartArea: {
        top: 12,
        right: 12,
        bottom: 48,
        left: 48,
        height: '100%',
        width: '100%'
      },
      height: 800,
      legend: {
        position: 'bottom'
      },
      vAxis: {
        ticks: vTicks
      }
    };

    drawChart();
    window.addEventListener('resize', drawChart, false);
    function drawChart() {
      chart.draw(data, options);
    }
  },
  packages:['corechart', 'table']
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google图表将vAx设置为0.25个间隔

1 个答案: