Google图表-放置自定义格式轴值 [英] Google Charts - placing custom formatting axis values

问题描述

我有一些数字数据（例如 1、2、3、4、5 ..），我想以此为基础来构建图表。但是，我要显示其他文本而不是原始数字作为轴值。

I have some numeric data (e.g. "1, 2, 3, 4, 5..") based on which I want to build a chart. However, instead of raw numbers, I want to show other text as axis values.

例如，我要显示数字 1而不是数字 1

For example, instead of number "1" I want to display "one"

使用Google图表是否可能？

Is that possible to do with Google Charts?

推荐答案

使用对象符号，您可以为每个刻度提供值（ v：）和格式化值（ f：）

using object notation, you can provide the value (v:) and the formatted value (f:) for each tick

{v: 1, f: 'one'}

请参阅以下工作摘要...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5]
  ], true);

  var options = {
    hAxis: {
      ticks: [
        {v: 1, f: 'one'},
        {v: 2, f: 'two'},
        {v: 3, f: 'three'},
        {v: 4, f: 'four'},
        {v: 5, f: 'five'}
      ]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

这篇关于Google图表-放置自定义格式轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！