如何将Plotly.js图表的日期月份及悬浮文本改为荷兰语

问题 #

使用Plotly创建图表时，X轴日期的月份名称显示为英文，悬浮提示中的月份名称同样为英文，需要将两者改为荷兰语。示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My chart page</title>
        <script src='https://cdn.plot.ly/plotly-2.20.0.min.js'></script>
    </head>
    
    <body>
        <div id="root"></div>
    </body>
    
    <script>
       var trace1 = {
          x: ['2023-05-01', '2023-05-02', '2023-05-03'],
          y: [20, 14, 23],
          name: 'apples',
          type: 'bar'
        };

        var trace2 = {
          x: ['2023-05-01', '2023-05-02', '2023-05-03'],
          y: [12, 18, 29],
          name: 'oranges',
          type: 'bar'
        };

        var data = [trace1, trace2];

        var layout = {
            barmode: 'stack',
            xaxis: {
                tickformat: "%b %d",
                dtick: "D1"
            },
        };

        Plotly.newPlot('root', data, layout);
    </script>
</html>

解决方案 #

要实现日期月份的荷兰语显示，需要完成两个关键步骤：

• 加载荷兰语本地化脚本：在主Plotly脚本之后，引入Plotly的荷兰语本地化文件，确保本地化资源被加载。
• 配置图表使用荷兰语区域设置：在layout对象中添加locale: 'nl'属性，Plotly会自动根据区域设置替换月份名称，悬浮提示的日期文本也会同步生效。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My chart page</title>
        <script src='https://cdn.plot.ly/plotly-2.20.0.min.js'></script>
        <!-- 加载荷兰语本地化脚本 -->
        <script src='https://cdn.plot.ly/plotly-locale-nl-latest.js'></script>
    </head>
    
    <body>
        <div id="root"></div>
    </body>
    
    <script>
       var trace1 = {
          x: ['2023-05-01', '2023-05-02', '2023-05-03'],
          y: [20, 14, 23],
          name: 'apples',
          type: 'bar'
        };

        var trace2 = {
          x: ['2023-05-01', '2023-05-02', '2023-05-03'],
          y: [12, 18, 29],
          name: 'oranges',
          type: 'bar'
        };

        var data = [trace1, trace2];

        var layout = {
            barmode: 'stack',
            locale: 'nl', // 设置为荷兰语区域
            xaxis: {
                tickformat: "%b %d",
                dtick: "D1"
            },
        };

        Plotly.newPlot('root', data, layout);
    </script>
</html>

说明 #

• 引入的本地化脚本会覆盖Plotly默认的英文日期文本，将月份名称替换为荷兰语（例如May变为Mei）。
• 悬浮提示中的日期格式会自动跟随locale设置，无需额外配置即可显示荷兰语月份。

内容的提问来源于stack exchange，提问作者Cor