Vue Js：来自 Django API 的数据可视化平台答案

【问题标题】：Vuejs: Data visualisation platfrom from Django APIVue Js：来自 Django API 的数据可视化平台
【发布时间】：2021-10-01 23:11:48
【问题描述】：

我是前端新手，正在尝试设计一个使用来自 Django 的 RestAPI 的数据可视化平台。目前，我有一个 JSON 数据的嵌套数组。

JSON 数据在表单中。

[   
    {
            "location": "Loc 3",
            "session": [
                {
                    "start": "2021-01-01",
                    "count": 500,
                    "details": [
                        {
                            "id": 15,
                            "length_max": 19,
                            "length_min": 16,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        }
                    ]
                }
            ]
        },
        {
            "location": "Loc 4",
            "session": [
                {
                    "start": "2021-01-02",
                    "count": 800,
                    "details": [
                        {
                            "id": 16,
                            "length_max": 24,
                            "length_min": 18,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        }
                    ]
                },
                {
                    "start": "2021-01-02",
                    "count": 800,
                    "details": [
                        {
                            "id": 10,
                            "length_max": 29,
                            "length_min": 16,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        },
                        {
                            "id": 22,
                            "length_max": 29,
                            "length_min": 16,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        }
                    ]
                }
            ]
        },
    }
]

请让我知道如何将其显示在表格中，同时以图形方式显示，如果对表格进行了任何更改，则图表应动态更改。我们是否可以有基于列的表，并且基于活动列，图表的数量也应该有所不同。我已经使用 Axios 在创建的钩子中使用 API，并在模板中使用 3 个 v-for 循环来读取数据。有没有其他最佳实践可以将 JSON 数据展平并显示在 vue 表中？

我当前的模板是

          <tbody v-for="(posts, index) in APIData" :key="index">
            <template v-for="(sess) in posts.session">
            <tr  v-for="(det,index) in sess.details" :key="index">
              <td>{{det.id}}</td>
              <td>{{sess.start}}</td>
              <td>{{posts.location}}</td>
              <td>{{sess.counts}}</td>
            </tr>
            </template>
          </tbody>

提供表格和图表的最佳方式是什么，因此当其中任何一个发生更改时，两者都会动态更改。

【问题讨论】：

标签： vue.js axios vue-component vue-chartjs vue-tables-2

【解决方案1】：

使用 drf API 并将其可视化的最佳方式是使用 charstJs。
如果您简要浏览一下图表 js 文档，您可以轻松完成它。

它通过大量示例提供动态/反应性。

【讨论】：