ChartJS 如何访问QuickChart配置中的类变量?

nr7wwzry  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(192)

我在QuickChart示例配置中有以下回调函数。我只想使用toLocaleString()方法将数值格式化为货币(3,400)。
问题是我不能把一个变量传递给回调函数内部:

export class MoneyComponent implements OnInit {
    language: string = localStorage.getItem('language'); // de-DE

    ngOnInit(): void { 
        const myChart = new QuickChart();
        myChart.setConfig({
            type: 'bar',
            data: { // etc... },
            options: {
                scales: {
                    yAxes: [{
                        id: 'Left',
                        ticks: {
                            fontSize: 10,
                            callback: (value) => value.toLocaleString(this.language)
                        },
                    }]
                }
            }
        })
    }
}

value.toLocaleString(this.language)它不会格式化货币,因为回调函数中没有this.language变量。如果我添加字符串而不是变量,它就可以工作:

callback: (value) => value.toLocaleString('de-DE')

我用了箭头函数,所以它应该读变量,但是它没有读,为什么?
我还尝试使用不带this关键字的变量,但出现以下错误:
图表错误参考错误:a未定义

const language = localStorage.getItem('language');
ngOnInit(): void { 
        const myChart = new QuickChart();
        myChart.setConfig({
                //....
                callback: (value) => value.toLocaleString(language)
iqxoj9l9

iqxoj9l91#

因为QuickChart在服务器端呈现图表,所以它不能访问本地变量。您可以将setConfig中的所有内容看作是作为字符串而不是函数传递的。
这里最直接的方法就是将config作为字符串传递,然后插入language值:

myChart.setConfig(`{
            type: 'bar',
            data: { // etc... },
            options: {
                scales: {
                    yAxes: [{
                        id: 'Left',
                        ticks: {
                            fontSize: 10,
                            callback: (value) => value.toLocaleString('${language}')
                        },
                    }]
                }
            }
        }`)

QuickChart文档中有一些替代方法。

相关问题