将千位分隔符添加到 chartist.js

Question

所以我正在尝试将千位分隔符添加到图表数字中，这是使用 npm package chartist 制作的。接下来是我尝试实现的方式：


    const data = {
          // A labels array that can contain any sort of values
          labels: this.props.labels.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."),
          // Our series array that contains series objects or in this case series data arrays
          series: [this.props.data]
        };

我尝试更改包本身，但每次出现下一个错误时：


    Uncaught TypeError: Cannot assign to read only property 'length' of object '[object String]'
        at String.push (<anonymous>)
        at Object.Chartist.normalizeData (chartist.js:400)
        at constr.createChart (chartist.js:3387)
        at constr.initialize (chartist.js:1940)

我也尝试将其实现为一个函数：


    function(label){label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

但是它显示 data.labels（来自 npm 包）不是一个函数。

编辑 1： 如果我 console.log(this.props.labels) 那么我得到 this log in console 我用包名称 chartist-plugin-tooltips 粘贴的图表编号，所以也许我必须在那里更改一些东西，我不知道。

Answer 1

它正在尝试运行 .push 针对字符串而不是数组。我假设标签应该是一个数组，但是 .replace 会 return 一个字符串。

也许您打算使用 .split() 将标签转换回数组。从 toString() 您将得到一个字符串，它是数组值的 comma-separated 列表。所以你将不得不使用逗号再次拆分它。例如

labels: this.props.labels.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".").split(',')

编辑

如果您的数组值有逗号，您将需要使用不同的分隔符 .join，而不是 .toString。

    this.props.labels.join('$').replace(/\B(?=(\d{3})+(?!\d))/g, ".").split('$')

最终编辑

如果您实际上没有向数组中添加值，则映射元素会更清晰！再次阅读您的问题时，我意识到这一点有点晚了。

this.props.labels.map(label => label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."))

将千位分隔符添加到 chartist.js

Add thousand separators to chartist.js

reactjs

chartist.js