从轴中删除十进制值

时间:2018-06-01 12:33:46

标签: charts google-visualization

我正在使用谷歌图表,我对hAxis的格式有问题。 当它只有4个值时,它看起来像这样:

enter image description here

我想删除实际值之间的那些十进制数。我不希望它显示0.5,1.5,2.5,3.5 怎么办呢?

1 个答案:

答案 0 :(得分:1)

如果您使用经典图表,可以使用一些选项 但使用材料图表

不支持这些

您可以使用选项hAxis.format更改数字格式,
但这只会删除小数并导致数字重复

使用 matieral 图表时我发现​​的唯一方法,
是使用x轴的字符串值...

['Lesson', 'Average', 'Average best'],
['1', 10, 10],
['2', 10, 10],
['3', 10, 10],
['4', 7, 7.5]

或者您可以使用DataView将数字转换为字符串...

var data = google.visualization.arrayToDataTable([
  ['Lesson', 'Average', 'Average best'],
  [1, 10, 10],
  [2, 10, 10],
  [3, 10, 10],
  [4, 7, 7.5]
]);

var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    return dt.getValue(row, 0).toFixed(0);
  },
  label: data.getColumnLabel(0),
  type: 'string'
}, 1, 2]);

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



google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Lesson', 'Average', 'Average best'],
    [1, 10, 10],
    [2, 10, 10],
    [3, 10, 10],
    [4, 7, 7.5]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return dt.getValue(row, 0).toFixed(0);
    },
    label: data.getColumnLabel(0),
    type: 'string'
  }, 1, 2]);

  var options = {
    chart: {
      title: 'Results distribution by lesson',
    },
    height: 280
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(view, google.charts.Bar.convertOptions(options));
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;