如何将谷歌图表中坐标轴上的格式设置为特定格式？ [英] How to set the formatting on the axes in Google Charts to a certain pattern?

问题描述

我想将轴上的值的格式更改为：

  1 
 100 
 1 000 
 10 000 
 100 000 
 1 000 000 
  

含义，我想将默认分组符号更改为空格（''）。到目前为止，我尝试了不同的方法，但都没有工作。即使文档也无济于事。任何人？

重要提示：
$ b

1. 我想更改轴上的值的格式，而不是内部值。




2. 我不想更改谷歌图表的语言。

解决方案

use option - > ticks - 为任一轴提供自定义标签

hAxis 或 vAxis

使用对象表示法提供值 v：和格式化值 f：

  hAxis：{
 ticks：[
 {v：0，f：'1'}，
 {v：1，f：'100'}，
 {v：2，f：'1 000'}，
 {v：3，f：'10000'}，
 {v：4，f：'100 000'}，
 {v：5，f：'1 000 000'} 
] 
}，
  

请参阅以下工作片段...

  google.charts.l oad（'current'，{callback：drawChart，packages：['corechart']}）; function drawChart（）{var data = google.visualization.arrayToDataTable（[['x'，'y0']，[0，0 ]，[1,1]，[2,2]，[3,3]，[4,4]，[5,5]，[6,6]]）; var options = {hAxis：{ticks：[{v：0，f：'1'}，{v：1，f：'100'}，{v：2，f：'1 000'}，{v： 3，f：'10 000'}，{v：4，f：'100 000'}，{v：5，f：'1 000 000'}]}，vAxis：{ticks：[{v： f：'1'}，{v：1，f：'100'}，{v：2，f：'1 000'}，{v：3，f：'10000'}，{v： f：'100 000'}，{v：5，f：'1 000 000'}]}}; var chart = new google.visualization.LineChart（document.getElementById（'chart'））; chart.draw（data，options）;}  

< script>< / div>< / id&c; / b>



















p>您可以使用数字格式化程序来创建数字模式

  var formatLabel = new google.visualization.NumberFormat（{
 groupingSymbol：''，
 fractionDigits：0 
}）; 
  

格式化数据表以查看工具提示上的格式

  //格式工具提示
 formatLabel.format（data，1）; 
  

仍然需要创建自定义标签才能在轴上查看

  //创建轴标签
 var axisTicks = []; 
 var axisRange = data.getColumnRange（1）; 
 for（var i = axisRange.min; i< = axisRange.max; i = i + 1000）{
 axisTicks.push（{
v：i，
f：formatLabel .formatValue（i）
}）; 
} 
  

请参阅以下工作片段...

google.charts.load（'current'，{callback：drawChart，packages：['corechart']}）

< script>< / div>< / id&c; / pre>

I want to change the formatting of the values on the axis to look like so:

1
100
1 000
10 000
100 000
1 000 000

Meaning, I'd like to change the default grouping symbol to a space (' '). So far I tried with different approaches but none of them worked. Even the documentation couldn't help me much. Anyone?

Important:

1. I want to change the formatting on the values on the axis, not the inner values.

2. I don't want to change the language of the google chart.

解决方案

use option --> ticks -- to provide custom labels for either axis

hAxis or vAxis

using object notation, provide both a value v: and a formatted value f:

    hAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    },

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5],
    [6, 6]
  ]);
  var options = {
    hAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    },
    vAxis: {
      ticks: [
        {v: 0, f: '1'},
        {v: 1, f: '100'},
        {v: 2, f: '1 000'},
        {v: 3, f: '10 000'},
        {v: 4, f: '100 000'},
        {v: 5, f: '1 000 000'}
      ]
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

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

EDIT

you can use a number formatter to create the number pattern

var formatLabel = new google.visualization.NumberFormat({
  groupingSymbol: ' ',
  fractionDigits: 0
});

format the data table to see the format on the tooltips

// format tooltips
formatLabel.format(data, 1);

still need to create custom labels to see on the axis

// create axis labels
var axisTicks = [];
var axisRange = data.getColumnRange(1);
for (var i = axisRange.min; i <= axisRange.max; i=i+1000) {
  axisTicks.push({
    v: i,
    f: formatLabel.formatValue(i)
  });
}

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0'],
    [0, 1000],
    [1, 2000],
    [2, 3000],
    [3, 6000],
    [4, 10000]
  ]);

  var formatLabel = new google.visualization.NumberFormat({
    groupingSymbol: ' ',
    fractionDigits: 0
  });

  // format tooltips
  formatLabel.format(data, 1);

  // create axis labels
  var axisTicks = [];
  var axisRange = data.getColumnRange(1);
  for (var i = axisRange.min; i <= axisRange.max; i=i+1000) {
    axisTicks.push({
      v: i,
      f: formatLabel.formatValue(i)
    });
  }

  var options = {
    height: 400,
    pointSize: 4,
    vAxis: {
      ticks: axisTicks
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

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

这篇关于如何将谷歌图表中坐标轴上的格式设置为特定格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！