使用更新按钮将2个图表合并为1个图表(chart.js)

<button id="mergeButton">合并图表</button>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<canvas id="mergedChart"></canvas>

// 创建第一个图表
var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
    type: 'bar',
    data: {
        // 第一个图表的数据
    },
    options: {
        // 第一个图表的配置选项
    }
});

// 创建第二个图表
var ctx2 = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx2, {
    type: 'line',
    data: {
        // 第二个图表的数据
    },
    options: {
        // 第二个图表的配置选项
    }
});

document.getElementById('mergeButton').addEventListener('click', function() {
    // 获取第一个图表的数据和配置选项
    var chart1Data = chart1.data;
    var chart1Options = chart1.options;

    // 获取第二个图表的数据和配置选项
    var chart2Data = chart2.data;
    var chart2Options = chart2.options;

    // 合并数据和配置选项到一个新的数据对象
    var mergedData = Object.assign({}, chart1Data, chart2Data);
    var mergedOptions = Object.assign({}, chart1Options, chart2Options);

    // 创建合并后的图表
    var mergedCtx = document.getElementById('mergedChart').getContext('2d');
    var mergedChart = new Chart(mergedCtx, {
        type: 'bar',
        data: mergedData,
        options: mergedOptions
    });
});