在Blazor中的Chart.JS 4中显示货币符号

0vvn1miw 于 2022-12-26 发布在 Chart.js

关注(0)|答案(1)|浏览(158)

我正在Blazor中使用ChartiderJS（版本4.1），并且已经成功地建立并运行了一个简单的线图。
现在，我需要将货币符号添加到y轴（显示销售总额），此时它只显示一个数字4，222
我当前的选项和数据集匿名类型如下所示，这些类型通过JS Interops发送到Chart.JS。以下是我迄今为止尝试过的，但未能在工具提示和y轴中包含符号。

var config = new
{
    Type = Type.ToString().ToLower(),
    Options = new
    {
        Responsive = true,
        Scales = new
        {
            y = new
            {
                ticks = new
                {
                    color = "white"
                },
                grid = new
                {
                    color = "white",
                    borderColor = "white",
                    drawOnChartArea = false
                },
                scaleLabel = new
                {
                    display = true,
                    labelString = "Sales Total £",
                    fontColor = "white"
                }
            },
            x = new
            {
                ticks = new
                {
                    color = "white"
                },
                grid = new
                {
                    color = "white",
                    borderColor = "white",
                    drawOnChartArea = false
                    }
                }
            },
            Tooltips = new
            {
                Callbacks = new
                {
                    Label = "function(tooltipItem, data) { return '$' + tooltipItem.value; }"
                }
            }
        },
    Data = ChartData
};

要在工具提示和yAxis中包含货币符号，我需要修改上面的哪些内容？

chart.js

来源：https://stackoverflow.com/questions/74889257/displaying-currency-symbol-in-chart-js-4-within-blazor

1条答案

按热度按时间

xqk2d5yq1#

从v3开始，工具提示位于选项中的插件下：here
下面是它在javaScript中的样子：

options:{        
    ...
    plugins: {
        tooltip: {
            callbacks: {
                label: function (context) {
                    if (context.parsed.y !== null) {
                        return context.dataset.label + ": " +
                            new Intl.NumberFormat('de-DE', {
                                style: 'currency',
                                currency: 'EUR'
                            }).format(context.parsed.y);
                    }
                    return "";
                }
            }
        }
    }
    ...
}

对于y轴，您还可以使用回调：

options:{
    ...
    scales: {
        y: {          
            ticks: {
                callback: function (value, index, ticks) {
                    return new Intl.NumberFormat('de-DE', {
                        style: 'currency',
                        currency: 'EUR'
                    }).format(value);
                }
            }
        }
    }
    ...
}

注意，注意它被称为“工具提示”，而不是“工具提示”！

赞(0）回复(0）举报 2022-12-26

我来回答

在Blazor中的Chart.JS 4中显示货币符号

1条答案

相关问题

热门标签

最新问答