从 cdn 添加时间笛卡尔轴的日期适配器答案

【问题标题】：Adding a Date adapter for Time Cartesian axis from a cdn从 cdn 添加时间笛卡尔轴的日期适配器
【发布时间】：2021-07-20 10:48:29
【问题描述】：

我想创建一个包含Time Cartesian axis 的图表。文档告诉我，我需要为类型使用适配器：“时间”轴。我选择了 chartjs-adapter-date-fns，并使用以下 cdn 导入：

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

现在文档告诉我必须将对象作为轴 ID 的 adapters.date 属性传递。但是我应该把哪个类/对象放在那里？我被困在这里。谁能指出我正确的方向？

我正在使用 ChartJS 3.4.1 和 Chartisan。

                      x: {
                            adapters: { 
                                date: { 
                                    // Adapter object here.
                                }
                            },
                            type: 'time',
                            time: {
                                unit: 'day'
                            },
                        },

提前非常感谢！

【问题讨论】：

标签： chart.js

【解决方案1】：

chartjs-adapter-date-fns 的 documentation 声明：

date-fns 需要在每个 format() 调用上标记一个 date-fns 语言环境对象，这需要通过 adapters.date 选项显式设置语言环境

并给出如下例子：

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

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

【讨论】：

感谢您的回答。我试过了，但不幸的是我得到了 Uncaught SyntaxError: Cannot use import statement outside a module
尝试做同样的事情，但是当从 CDN 加载 chartjs-adapter-date-fns.bundle.min.js 而不是导入/webpacking 时，我不知道如何访问语言环境对象（上面代码中的 de） .任何帮助，将不胜感激。我发布了一个新问题：stackoverflow.com/questions/68739931/…

【解决方案2】：

没关系，只需添加 cdn 就足够了。问题是标签不是日期格式，而是相对时间（“2 小时前”而不是 20-07-2021）

【讨论】：

【解决方案3】：

希望不会太晚，但以防万一：我也解决了这个问题，最后发现您可以简单地为 chartjs 提供时间刻度整数作为 x 值。将时间戳转换为自纪元以来的秒数并乘以 1000，因为 js 使用毫秒，而 unix 使用秒。

我的代码在python中，所以我将时间戳字符串转换为自纪元以来的毫秒数，拳头：

# get data from backend   
hist = self.backend_get(f"/{name}/history")     
# convert format for chart, filter out None
data_l = [{'x' : 1000*int(datetime.fromisoformat(d['timestamp']).strftime('%s')), 
                   'y' : d['value']} for d in hist if d['value'] is not None]
label = "<insert your label>"

现在构造数据

        data = {
            'type': 'line',
            'data': {
                'labels': [],
                'datasets': [{
                    'label': label,
                    'data': data_l,
                    }]
                },
            'options': {
                'scales': {
                    'x': {
                        'type': 'time',
                        'time': {'unit': 'day'},
                    },
                },
            },
        }

最后将图表js和canvas插入到html中：

        html_s += '''
            <div>
              <canvas id="myChart" class="history_canvas"></canvas>
            </div>
            <script>
                var ctx = document.getElementById('myChart');
                var myChart = new Chart(ctx, 
        '''
        html_s += f'{data}'
        html_s += '''
                );
            </script>
            <h3>Raw data</h3>         
        '''

PS 我认为这仅适用于 Unix，因为时代。

【讨论】：