apache/echarts

Is possible to define separator, in French thousand separator as made by space and not comma ?

zairino opened this issue · 12 comments

zairino commented

问题简述 (One-line summary)

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):
  • 浏览器类型和版本 (Browser version):
  • 操作系统类型和版本 (OS Version):

重现步骤 (Steps to reproduce)

期望结果 (Expected behaviour)

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {

}

其他信息 (Other comments)

pissang commented

Yes you can format the label by yourself using the formatter option

  • 👎8
zairino commented

Not the label @pissang the thousand separator i hack this part of your js file :

function addCommas(x) {
 if (isNaN(x)) {
 return '-';
 }
 x = (x + '').split('.');
 return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1 ') + (x.length > 1 ? '.' + x[1] : '');
}

so if you can add in some options the ability to define the thousandSeparator ;)

astik commented

Hi all,
I run into the same issue with the current latest version.

It is too bad that the default formatter use an hardcoded function like addCommas to format numbers. Of course, we can redefine the formatter for each use case (xAxis.axisLabel, xAxis.axisPointer.label, yAxis.axisLabel, yAxis.axisPointer.label, ...) but this is a lot of work for a default behavior. At least, it should use browser locale to define which ways to format number.

Here is an example :

option = {
    tooltip: {
        trigger: 'axis',
			axisPointer: {
				type: 'cross'
			}
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        },
        axisPointer: {
            label:{
                formatter: function(a){return a.value.toFixed(2)}
            }
        }
    },
    series: [
        {
            name:'A',
            type:'line',
            data:[120000.5, 132000.5, 101000.5, 134000.5, 90000.5, 230000.5, 210000.5]
        },
        {
            name:'B',
            type:'line',
            data:[220000.5, 282000.5, 201000.5, 234000.5, 290000.5, 430000.5, 410000.5]
        }
    ]
};

As you can see, i redefined formater for yAxis.axisLabel and yAxis.axisPointer.label. Still, i need to do it also for tooltip content. As i'm working with multi-series, the tooltip is different than the other and is much more complicated.

Redefining the formatter should be a workaraound but it shouldn't be enough to close this issue =/

(you can drop the example above into the editor on : https://ecomfe.github.io/echarts-examples/public/editor.html) to see the issue.

astik commented

One thing to consider as an easy fix : toLocaleString

It would display number the right way by default depending on environment locale.

  • 👍7
maljac commented

@pissang I think the issue is still there:
https://github.com/apache/incubator-echarts/blob/7887f27a0ff47611d84109f9c9b202b8eaa31094/src/util/format.js#L30

As @astik mentions, it is a lot of work to redefine all formatters for the proper display of the correct thousand / decimal separator.

  • 👍2
astik commented

Another issue relative to this one : #8294 (it also have been closed by stale bot ='()

pynomaly commented

I'm also interested in a simpler way to display the correct number format. @pissang Is there any advance in this issue?

  • 👍3
develar commented

There is no possibility to provide own implementation of makeValueReadable. There is the only way — to set formatter, but in this case you loose default excellent presentation and have to duplicate it somehow.

  • 😕1
Vovan-VE commented

There are lots of variations for thousand and decimal separators across different languages. For example, seeing 12345.0 as "12,345" instead of "12 345" is very confusing for cyrillic languages since "12,345" means 12.345 .

develar commented

@Vovan-VE Yes, in my app I use Intl.NumberFormat / Intl.DateTimeFormat. Issue is that 1) you cannot easily set it globally (#8294) 2) for tooltip. formatter you have to duplicate a lot of complex logic, because you want standard tooltip with just changed number/time formatting.

Probably, it is easy to send PR, maybe I will do it when I will finish my app.

  • 👍5
irbian commented

We are experimenting this too. We can see it has been mentioned in other issues like #14516 , #17419 and #18264

@Vovan-VE Yes, in my app I use Intl.NumberFormat / Intl.DateTimeFormat. Issue is that 1) you cannot easily set it globally (#8294) 2) for tooltip. formatter you have to duplicate a lot of complex logic, because you want standard tooltip with just changed number/time formatting.

Probably, it is easy to send PR, maybe I will do it when I will finish my app.

Did you were able to make the PR?