从折线图轴中删除小数

Removing Decimals From Line Chart Axis

本文关键字：删除 小数 折线图      更新时间：2023-09-26

我有一个我正在使用的谷歌折线图，在许多情况下，轴上的数字代表小数点。显然，因为我的数据代表的是人，所以用小数点表示轴是没有意义的。我希望他们四舍五入到整数。到目前为止，我一直在xAxis中使用format选项，如下所示。

  var options = {
    legend: 'none',
    hAxis: {
      title: 'Dogs',
      format: 'long'
    }
  };

但是，xAxis上的点表示为小数。该文件可以在这里找到。出了什么问题，我该如何解决?

您可以设置自定义格式说明符，例如:

  • #(数字占位符)
  • 0(零占位符)

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');
    data.addRows([
      [0, 0]
    ]);
    var options = {
        legend: 'none',
        hAxis: {
            title: 'Dogs',
            format: '#'
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

另一个选项是指定hAxis.ticks:

将自动生成的x轴刻度替换为指定的数组。

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');
    data.addRows([
      [0, 0]
    ]);
    var options = {
        legend: 'none',
        hAxis: {
            title: 'Dogs',
            //format: '#'
            ticks: [-1,0,1]
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

相关文章：