从折线图轴中删除小数

时间:2015-09-21 18:06:14

标签: javascript google-visualization

我有一个我正在使用的谷歌折线图,在很多情况下,轴上的数字代表小数点。显然,由于我的数据代表人,因此以小数点显示轴是没有意义的。我想让他们四舍五入到整数。到目前为止,我已经使用format中的xAxis选项一直辛苦工作。

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

但是,xAxis上的点表示为小数。可以找到jsfiddle here。怎么了,怎么解决这个问题?

1 个答案:

答案 0 :(得分:1)

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

  • #(数字占位符)
  • 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>
&#13;
&#13;
&#13;

另一种选择是指定hAxis.ticks

  

用指定的替换自动生成的X轴刻度   阵列。

示例

&#13;
&#13;
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);
}
&#13;
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;