我一直试图找到一个关于如何实现包装n个canvas元素的幻灯片的实例。我尝试使用我的画布创建一个非常简单幻灯片,该示例基于使用具有不同背景而不是画布的列表项的示例。
基于 this fiddle ,我将列表元素更改为:
<div id="slider">
<ul>
<li> <canvas id="programming"> </canvas> </li>
<li> <canvas id="design"> </canvas> </li>
</ul>
</div>
这是我的javascript:
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;
似乎大多数示例都包含图片的幻灯片,而在我的情况下,我想创建一个图表幻灯片(chartjs - 使用画布绘制图表)。