使用捆绑的 (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
}
},
}
}
}
})
我在客户端 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
}
},
}
}
}
})