如何提取ChartJs数据和配置属性

Question

我们正在努力让同事能够相互共享 ChartJS 图表。我们当前的大多数图表都是动态的，用户可以应用过滤器（日期、添加/删除数据等）。 计划是有一个按钮，单击，将获取数据和属性（标签、线条颜色、边框宽度、图表类型等）并通过 url 传递此数据。然后，用户可以将该链接发送给其他人。他们可以打开它来查看捕获的图表，就像原始用户看到的那样，就像屏幕截图一样，但启用了所有交互功能。

例如

stackoverflow.com/shared_chart.php?conf=%7B%22responsive%22:true,%22responsiveA

当图表由

myChart = new Chart(ctx, config);

创建图表时，ChartJs 向图表对象添加了许多我不需要的新属性（例如 $plugin、_meta）。 而且，当我

JSON.stringify(myChart.config)

时，我收到错误

“未捕获的类型错误：将循环结构转换为 JSON”

。

我在下面添加了创建示例条形图所需的代码：

// HTML needs a canvas element
<-- <canvas id="myChart"></canvas> -->
const ctx = $('#myChart');
let config;
let myChart;


// config would look something like this
config = {
    type: 'bar',

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: 'rgba(92,184,92,0.5)',
            borderColor: 'rgba(92,184,92,1.000)',
            borderWidth: 2,
            data: [
                1,2,3,4,3,2,1
            ]
        }, {
            label: 'Dataset 2',
            backgroundColor: 'rgba(66,139,202,0.5)',
            borderColor: 'rgba(66,139,202,1)',
            borderWidth: 2,
            data: [
                7,2,3,1,5,2,1
            ]
        }]
    },

    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Bar Chart'
        }
    }
}    

myChart = new Chart(ctx,config);

在他们指向的页面上，我想获取 GET 数据并构建一个新的图表。

Answer 1

您可以排除 Chart.js 添加的额外属性。例如：

JSON.stringify(myChart.config, function(key, value) {
    if (key === '_meta') return undefined;
    else return value;
}

Answer 2

我的下面的代码构建了一个与 stackoverflow 兼容的代码片段。

它基本上可以工作，但还需要一些完成工作，特别是在使用插件时。

以下 JavaScript 代码检索 Chart 实例的大部分配置，并将具有兼容图表的网页复制到剪贴板。您可以将剪贴板粘贴到 stackoverflow.com 问题或答案的片段中。

    let {options, plugins, data} = chart_instance.config;
    //optionally filter out hidden datasets
    data.datasets = data.datasets.filter(
        (ds, i) => info.chart.isDatasetVisible(i));
    let snippet = `
        <script>
        const data = ${JSON.stringify(data, null, '\t')};
        const plugins = ${JSON.stringify(plugins, null, '\t')};
        const options = ${JSON.stringify(options, null, '\t')};
        </script>
        
        <script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@^2"></script>
        <script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
        
        <div class="chart" style="height:184px">
            <canvas id="myChart"></canvas>
        </div>
        <script>
        const ctx = document.getElementById('myChart');
        options.plugins = plugins;
        chart = new Chart(ctx, {
                type: 'line',
                plugins: [ChartDataLabels],
                data,
                options,
            }
        );
        </script>
    `;
    navigator.clipboard.writeText(snippet)
        .then(() => {
            alert('clipboard successfully set');
        })
        .catch(error => {
            alert('clipboard write failed', error);
        });

祝你好运！