使用 chart.js 动态添加新图表答案

【问题标题】：Dynamically adding a new chart using chart.js使用 chart.js 动态添加新图表
【发布时间】：2021-09-24 07:11:29
【问题描述】：

我正在创建一个数据仪表板，但我偶然发现了一个让我完全困惑的问题。我使用chart.js 作为图表渲染器，使用jquery/js 来控制仪表板。我希望用户能够通过单击按钮添加新图表，我可以使用以下内容轻松呈现 html 内容：

   $('.graphs').append('<canvas id="' + name + '" data-dataset="2323"></canvas>');

这是根据需要创建 html，但是 chart.js 需要每个图形的一大块 javascript 用于选项和数据集。我不知道如何创建应用程序的这个元素，我找不到任何支持这种动态图创建方法的文档。我相当精通 jquery，但这让我摸不着头脑。

我正在寻找一种如何动态创建此代码的方法：

 new Chart(document.getElementById(name), {
                type: 'bar',
                data: {
                    labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
                    datasets: [{
                        label: "Sales (millions)",
                        backgroundColor: ["#3e95cd"],
                        data: datasets1
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: false,
                        text: 'Example Bar Chart'
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: true
                            }
                        }]
                    }
                },

            });

或其他一些方法。

【问题讨论】：

你可以做一件事。只需在单击新图表按钮时发送 Ajax 调用，然后从该文件返回 html 并将其附加到 div 中。这将有望打印图表。请尝试一下，然后告诉我。

标签： javascript jquery gitgraph.js

【解决方案1】：

修改这篇文章中的解决方案是我发现实现我想要的唯一方法。我不能把功劳归于这里的答案有很大帮助：Create multiple chart.js charts from jsonfile data

【讨论】：