Javascript 如何在幻灯片中使用画布（chartjs）

我一直在试图找到一个关于如何实现包装n个画布元素的幻灯片放映的工作示例。我试图用画布创建一个非常简单的幻灯片，这个例子使用了背景不同的列表项而不是画布

基于我将列表元素更改为：

<div id="slider"> 
    <ul>
    <li> <canvas id="programming"> </canvas> </li>
    <li> <canvas id="design"> </canvas> </li> 
    </ul> 
</div>

---

似乎大多数示例都包含图像的幻灯片，而在我的示例中，我想创建图表的幻灯片（chartjs-它使用画布绘制图表）

请试试这个。。。希望它能帮助你找到不适合你的东西，把你的代码放在小提琴上，我得到了这张幻灯片，幻灯片上有两张图。我唯一改变的是将第二个ctx变量命名为新的名称

var designBarChartData = {
        labels: ["HTML5", "CSS",  "jQuery", "JavaScript", "ASP.NET"],
        datasets: [{
            label: 'Dataset 1',
            backgroundColor: ["rgba(255,82,0,1)", "rgba(0,100,255,0.9)", "rgba(255,255,255,0.9)", "rgba(231,131,0, 1)", "rgba(0,122,204,0.8)"],
            borderColor: ['rgba(255,39,0,1)', 'rgba(0,20,255, 1)', 'rgba(0,0,0, 1)', 'rgba(232, 90,0, 1)', 'rgba(0,70,204, 1)'],
            borderWidth: 3,
            yAxisID: "y-axis-1",
            data: [40, 30, 50, 40, 30]
        }]
    };

var langBarChartData = {
    labels: ["Core Java", "C/C++", "C#", "Relational-Databases", "VB.NET", "Erlang", "JavaScript"],
    datasets: [{
        label: 'Programming',
        backgroundColor: ["rgba(102,61,0,0.9)", "rgba(5,32,74,0.9)", "rgba(176,0,255,0.8)", "rgba(101,0,0,0.8)", "rgba(0,115,255,0.8)", "rgba(146,0,0,0.9)", "rgba(236,211,0,0.8)"],
        yAxisID: "y-axis-1",
        data: [40, 30, 50, 40, 60, 20, 30]
    }]
};
    window.onload = function() {
        var ctx = document.getElementById("design").getContext("2d");
        window.myBar1 = Chart.Bar(ctx, {
            data: designBarChartData, 
            options: {
                responsive: true,
                hoverMode: 'label',
                hoverAnimationDuration: 400,
                stacked: false,
                title:{
                    display:true,
                    text:"Chart.js Bar Chart - Multi Axis"
                },
                scales: {
                    yAxes: [{
                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "left",
                        id: "y-axis-1",
                        ticks: {
                            max: 100,
                            min: 0
                        }
                    }, {
                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "right",
                        id: "y-axis-2",
                        gridLines: {
                            drawOnChartArea: false
                        }
                    }],
                }
            }
        }); 
    }; 
        window.onload = function() {
        var ctx = document.getElementById("programming").getContext("2d");
        window.myBar1 = Chart.Bar(ctx, {
            data: langBarChartData, 
            options: {
                responsive: true,
                hoverMode: 'label',
                hoverAnimationDuration: 400,
                stacked: false,
                title:{
                    display:true,
                    text:"Chart.js Bar Chart - Multi Axis"
                },
                scales: {
                    yAxes: [{
                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "left",
                        id: "y-axis-1",
                        ticks: {
                            max: 100,
                            min: 0
                        }
                    }, {
                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "right",
                        id: "y-axis-2",
                        gridLines: {
                            drawOnChartArea: false
                        }
                    }],
                }
            }
        }); 
    }; 
      Chart.defaults.global.legend.display = false;