时间戳

首页 > 解决方案 > 从轴上删除十进制值

charts - 从轴上删除十进制值

问题描述

我正在使用谷歌图表，我对 hAxis 的格式有疑问。当上面只有 4 个值时，它看起来像这样：

在此处输入图像描述

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

标签： chartsgoogle-visualization

解决方案

如果您使用的是经典图表，则可以使用一些选项，
但使用材料图表 不支持这些选项

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

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

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

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

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>

推荐阅读