Question

我们正在尝试使同事能够彼此共享 ChartJS 图。我们当前的大多数图表都是动态的，用户可以应用过滤器（日期，添加/删除数据等）。计划是要有一个按钮，点击，将获得数据和属性（标签，线条颜色，borderWidth，图表类型等 ），然后通过网址传递此数据。然后，用户可以将该链接发送给其他人。他们可以打开它来查看原始用户所捕获的图表，如屏幕截图，但启用了所有交互功能。

例如

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

由myChart = new Chart(ctx, config);创建图表时，ChartJs向图表对象添加了许多不需要的新属性（例如$ plugin，_meta）。而且，当我JSON.stringify(myChart.config)时出现错误

"Uncaught TypeError: Converting circular structure to 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数据并构造一个新的Chart。

Answer 1

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

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

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

1 个答案: