使用捆绑(CDN) chartjs-adapter-date-fns.bundle.min.js配置区域设置?<

Question

我在客户端HTML中使用Chart.js与日期-fns适配器(https://github.com/chartjs/chartjs-adapter-date-fns)以允许时间笛卡尔轴(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配置语言环境支持?如果是这样，你能给我一个例子，如何访问区域设置类传递到适配器。日期。区域设置在规模选项。

文档:

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

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

…但是import在浏览器中不起作用-那么我如何获得像de这样的区域设置?

Answer 1

我切换到Luxon，因为我在使用date-fns时遇到了区域设置问题。然后是一个简单的一行:luxon.Settings.defaultLocale = "fi";

luxon库对于解析时间也很有用，所以我建议尽可能使用它。更多关于luxon

Answer 2

我正在使用NuxtJS，但这并不重要。您只需要将区域设置输入到站点中。这里有一点关于date-fns locale的内容

然后，在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
}
},
}
}
}
})