Chart.js全局格式化数字标签

时间:2021-01-10 20:35:07

All I want to do is set a simple Global Option that formats numbers with commas for Y AXIS and Tooltips. I have tried a million examples and I can not get this to work.

我想要做的就是设置一个简单的全局选项,使用逗号为Y轴和工具提示格式化数字。我已经尝试了一百万个例子,我无法让它工作。

Version: Chart.js/2.2.2

版本:Chart.js / 2.2.2

I would like to format all numbers with commas for Y axis and tooltip values using a simple global option. The reason why this would be easier using global is that I am generating and dynamically sending in the JSON data and adding more options to that would be a pain, dynamically when all the numbers need to just behave the same.

我想使用简单的全局选项使用逗号为Y轴和工具提示值格式化所有数字。使用global更容易的原因是我生成并动态发送JSON数据并添加更多选项,这将是一个痛苦的动态,当所有数字需要表现相同时。

1 个解决方案

#1


4  

After talking to the developer I have a really nice global method for setting y axis and tooltip number formatting. I hope this can help someone else too!

在与开发人员交谈后,我有一个非常好的全局方法来设置y轴和工具提示数字格式。我希望这也可以帮助别人!

You can definitely use global options to control that.

你绝对可以使用全局选项来控制它。

For instance, here's how you would update so that all linear scales (the default Y axis) will format using dollar signs and nice numbers

例如,以下是您将如何更新,以便所有线性比例(默认Y轴)将使用美元符号和好数字格式化

Chart.scaleService.updateScaleDefaults('linear', {
  ticks: {
    callback: function(tick) {
      return '$' + tick.toLocaleString();
    }
  }
});

Here's how you could also do the same for a tooltip

以下是您对工具提示也可以这样做的方法

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  var dataset = data.datasets[tooltipItem.datasetIndex];
  var datasetLabel = dataset.label || '';
  return datasetLabel + ": $" + dataset.data[tooltipItem.index].toLocaleString();
};

Then I asked about including simple flags for formatting within the axes and dataset settings:

然后我询问在轴和数据集设置中包含用于格式化的简单标志:

I've hesitated to push to include these in the core because there are so many different options and trying to support each and every one would dramatically increase the size of the already large library. It may make sense to encourage someone to create a library of formatters that essentially automates the creation of these functions to speed up development.

我已经犹豫是否要将这些包含在核心中,因为有太多不同的选项并试图支持每一个选项会大大增加已经很大的库的大小。鼓励某人创建格式化程序库可能是有意义的,这些格式化程序基本上可以自动创建这些函数以加速开发。

References:

参考文献:

https://github.com/chartjs/Chart.js/issues/3294#issuecomment-246532871 https://jsfiddle.net/ChrisGo/k4Lxncvm/

https://github.com/chartjs/Chart.js/issues/3294#issuecomment-246532871 https://jsfiddle.net/ChrisGo/k4Lxncvm/

#1


4  

After talking to the developer I have a really nice global method for setting y axis and tooltip number formatting. I hope this can help someone else too!

在与开发人员交谈后,我有一个非常好的全局方法来设置y轴和工具提示数字格式。我希望这也可以帮助别人!

You can definitely use global options to control that.

你绝对可以使用全局选项来控制它。

For instance, here's how you would update so that all linear scales (the default Y axis) will format using dollar signs and nice numbers

例如,以下是您将如何更新,以便所有线性比例(默认Y轴)将使用美元符号和好数字格式化

Chart.scaleService.updateScaleDefaults('linear', {
  ticks: {
    callback: function(tick) {
      return '$' + tick.toLocaleString();
    }
  }
});

Here's how you could also do the same for a tooltip

以下是您对工具提示也可以这样做的方法

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  var dataset = data.datasets[tooltipItem.datasetIndex];
  var datasetLabel = dataset.label || '';
  return datasetLabel + ": $" + dataset.data[tooltipItem.index].toLocaleString();
};

Then I asked about including simple flags for formatting within the axes and dataset settings:

然后我询问在轴和数据集设置中包含用于格式化的简单标志:

I've hesitated to push to include these in the core because there are so many different options and trying to support each and every one would dramatically increase the size of the already large library. It may make sense to encourage someone to create a library of formatters that essentially automates the creation of these functions to speed up development.

我已经犹豫是否要将这些包含在核心中,因为有太多不同的选项并试图支持每一个选项会大大增加已经很大的库的大小。鼓励某人创建格式化程序库可能是有意义的,这些格式化程序基本上可以自动创建这些函数以加速开发。

References:

参考文献:

https://github.com/chartjs/Chart.js/issues/3294#issuecomment-246532871 https://jsfiddle.net/ChrisGo/k4Lxncvm/

https://github.com/chartjs/Chart.js/issues/3294#issuecomment-246532871 https://jsfiddle.net/ChrisGo/k4Lxncvm/