在同一画布C3.js上添加多个图表

Question

我使用c3.js使用以下代码在spreadjs张纸上创建渲染图表。

var data = (function () {
var chartData = [];
    for (var i = 0; i < 3; i++) {
        var columnData = [];
        columnData.push("Data" + i);
        for (var j = 0; j < 10; j++) {
            columnData.push(Math.round(Math.random() * 100));
        }
        chartData.push(columnData);
    }
    return chartData;
})();
var spreadChart = new GcSpread.Sheets.Spread($("#ss").get(0));
activeSheet = spreadChart.getActiveSheet();
activeSheet.isPaintSuspended(true);
activeSheet.setArray(0, 0, data);
activeSheet.isPaintSuspended(false);

activeSheet.bind(GcSpread.Sheets.Events.CustomFloatingObjectLoaded, function (sender, args) {
    var chartContainer = $(args.element);
    chartContainer.attr("id", "chart");
    chart = c3.generate({
        data: {
            columns: args.sheet.getArray(0, 0, 30, 10)
        }
    });
});


activeSheet.bind(GcSpread.Sheets.Events.FloatingObjectChanged, function (sender, args) {
    if (args.propertyName === "width" || args.propertyName === "height") {
        chart.resize({width: args.floatingObject.width(), height: args.floatingObject.height()});
    }
});

activeSheet.bind(GcSpread.Sheets.Events.ValueChanged, function (sender, args) {
    chart = c3.generate({
        data: {
            columns: args.sheet.getArray(0, 0, 30, 10)
        }
    });
});

var floatChart = new GcSpread.Sheets.CustomFloatingObject("chart", 10, 100, 600, 200);
floatChart.Content($("<div style='background:white; border:1px solid gray'></div>"));
activeSheet.addFloatingObject(floatChart);

所有工作正常，现在我想在同一个画布中添加更多图表，我尝试使用下面的代码在同一画布上渲染第二个图表，但无法使其正常工作。第二张图表显示但是空白。

 //For second chart
 var spreadChart1 = new GcSpread.Sheets.Spread($("#ss").get(0));
                    activeSheet1 = spreadChart1.getActiveSheet();
                    activeSheet1.isPaintSuspended(true);
                    activeSheet1.setArray(0, 0, data);
                    activeSheet1.isPaintSuspended(false);

                    activeSheet1.bind(GcSpread.Sheets.Events.CustomFloatingObjectLoaded, function (sender, args) {
                        var chartContainer1 = $(args.element);
                        chartContainer1.attr("id", "chart");
                        chart1 = c3.generate({
                            data: {
                                columns: args.sheet.getArray(0, 0, 30, 10)
                            }
                        });
                    });


                    activeSheet1.bind(GcSpread.Sheets.Events.FloatingObjectChanged, function (sender, args) {
                        if (args.propertyName === "width" || args.propertyName === "height") {
                            chart1.resize({width: args.floatingObject.width(), height: args.floatingObject.height()});
                        }
                    });

                    activeSheet1.bind(GcSpread.Sheets.Events.ValueChanged, function (sender, args) {
                        chart1 = c3.generate({
                            data: {
                                columns: args.sheet.getArray(0, 0, 30, 10)
                            }
                        });
                    });

                    var floatChart1 = new GcSpread.Sheets.CustomFloatingObject("chart1", 10, 100, 600, 200);
                    floatChart1.Content($("<div style='background:white; border:1px solid gray'></div>"));
                    activeSheet1.addFloatingObject(floatChart1);