使用捆绑的 (CDN) chartjs-adapter-date-fns.bundle.min.js 配置语言环境?

Configuring locale with bundled (CDN) chartjs-adapter-date-fns.bundle.min.js?

我在客户端 HTML 中使用 Chart.js 和 date-fns 适配器 (https://github.com/chartjs/chartjs-adapter-date-fns) to allow a time cartesian axis (https://www.chartjs.org/docs/latest/axes/cartesian/time.html)。

我正在从 CDN 加载 chartjs-adapter-date-fns - 即我的页面加载 chartjs-adapter-date-fns.bundle.min.js。 (我没有使用 import 和 webpack。)

是否仍然可以按照 https://github.com/chartjs/chartjs-adapter-date-fns#locale-support-via-scale-options 配置语言环境支持?如果是这样,请给我一个示例,说明如何访问区域设置 class 以传递给比例选项中的 adapters.date.locale。

文档状态:

// import date-fns locale:
import {de} from 'date-fns/locale';


// scale options:
{
    adapters: {
        date: {
            locale: de
        }
    }
}

... 但是 import 在浏览器中不起作用 - 那么我如何获得像 de 这样的语言环境?

我切换到 Luxon 因为我在使用 date-fns 时遇到语言环境问题。然后是简单的一行:luxon.Settings.defaultLocale = "fi";

luxon 库也非常适合解析时间,因此我建议尽可能使用它。 More on luxon

我正在使用 NuxtJS,但这并不重要。您只需要将语言环境设置到您的站点中。关于 date-fns 语言环境 here

的更多信息

然后,在 ChartJS 选项中,我这样做了并且成功了:

const ausgaben = new Chart(ctx, {
    type: 'bar',
    data: {
      backgroundColor: '#fff',
      datasets: [
        {
          label: 'Ausgaben',
          data: app.chartData.first,
          backgroundColor: 'red',
          type: 'bar',
          order: 10
        },
        additionalDataset
      ]
    },

    options: {
      scales: {
        x: {
          type: 'time',
          distribution: 'linear',
          time: {
            unit: 'day'
          },
          adapters: {
            date: {
              locale: de
            }
          },
        }
      }
    }
  })