在 Bootstrap 轮播中使用图表 js
Using chart js within Bootstrap Carousel
//Sampel Line Chart
var LineChartSampleData = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
datasets: [{
label: "Sales 1",
fillColor: "transparent",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [11, 12, 13, 14, 15, 16, 17]
}, {
label: "Sales 5",
fillColor: "transparent",
strokeColor: "rgba(236, 80, 80,1)",
pointColor: "rgba(236, 80, 80,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(236, 80, 80,1)",
data: [15, 21, 35, 42, 33, 33, 81]
}]
};
//Sampel Bar Chart
var BarChartSampleData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
//Sampel Radar Chart
var RadarChartSampleData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
//Sampel Polor Chart
var PolarChartSampleData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
//Sampel Pie Doughnut Chart
var PieDoughnutChartSampleData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
window.onload = function() {
window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
responsive:true
});
window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
responsive:true
});
window.RadarChartSample = new Chart(document.getElementById("radar-chart-sample").getContext("2d")).Radar(RadarChartSampleData,{
responsive:true
});
window.PolarChartSample = new Chart(document.getElementById("polar-chart-sample").getContext("2d")).PolarArea(PolarChartSampleData,{
responsive:true
});
window.PieChartSample = new Chart(document.getElementById("pie-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
responsive:true
});
window.DoughnutChartSample = new Chart(document.getElementById("doughnut-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
responsive:true
});
};
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item item1">
<canvas id="bar-chart-sample" height="80"></canvas>
<ul class="doughnut-chart-legend">
<li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
<li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
<li class="home ultra-small"><span class="legend-color"></span> Home</li>
</ul>
</div>
<div class="item item2">
<canvas id="line-chart-sample" height="80"></canvas>
</div>
<div class="item">
<canvas id="line-chart-sample" height="80"></canvas>
</div>
</div>
<hr class="transition-timer-carousel-progress-bar" />
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我在 Bootstrap 轮播中遇到 Chart Js 问题，它没有显示，因为图表未加载，它显示为 width:0px and height:0px。最近几个小时我一直在解决这个问题，希望你们能帮助我
这是我的 Html :
<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item item1">
<canvas id="bar-chart-sample" height="80"></canvas>
<ul class="doughnut-chart-legend">
<li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
<li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
<li class="home ultra-small"><span class="legend-color"></span> Home</li>
</ul>
</div>
<div class="item item2">
<canvas id="line-chart-sample" height="80"></canvas>
</div>
<div class="item">
</div>
</div>
<hr class="transition-timer-carousel-progress-bar" />
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
图表 JS：
//Sampel Line Chart
var LineChartSampleData = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
datasets: [{
label: "Sales 1",
fillColor: "transparent",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [11, 12, 13, 14, 15, 16, 17]
}, {
label: "Sales 5",
fillColor: "transparent",
strokeColor: "rgba(236, 80, 80,1)",
pointColor: "rgba(236, 80, 80,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(236, 80, 80,1)",
data: [15, 21, 35, 42, 33, 33, 81]
}]
};
var BarChartSampleData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
window.onload = function() {
window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
responsive:true
});
window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
responsive:true
});
};
感谢您的帮助，干杯！
这是您的代码的修订版。我假设您使用的是 Chartjs 1.0.2。
HTML:(同样html只是去掉空的<div class="item"></div>)
CHARTJS：
function generateChart() {
var LineChartCanvas = $("#line-chart-sample").get(0).getContext("2d");
var LineChartSample = new Chart(LineChartCanvas);
var LineChartSampleData = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
datasets: [
{
label: "Sales 1",
fillColor: "transparent",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [11, 12, 13, 14, 15, 16, 17]
},
{
label: "Sales 5",
fillColor: "transparent",
strokeColor: "rgba(236, 80, 80,1)",
pointColor: "rgba(236, 80, 80,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(236, 80, 80,1)",
data: [15, 21, 35, 42, 33, 33, 81]
}
]
};
LineChartSample.Line(LineChartSampleData);
//Bar Chart Sample
var BarChartCanvas = $("#bar-chart-sample").get(0).getContext("2d");
var BarChartSample = new Chart(BarChartCanvas);
var BarChartSampleData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
BarChartSample.Bar(BarChartSampleData);
};
generateChart();
现在，由于您正在使用 bootstrap 轮播，因此只会显示带有 active class 的项目。 Chartjs 无法为隐藏的 canvas 元素生成图表。
一种解决方法是在触发事件后生成图表。
像这样：
function resetChart() {
//Reset chart data
$('canvas').remove();
$('.item2').prepend('<canvas id="line-chart-sample" height="80"></canvas>');
$('.item1').prepend('<canvas id="bar-chart-sample" height="80"></canvas>');
generateChart();
}
$(document).on('click', '.carousel-control', function () {
resetChart();
});
现在我不确定这是否是解决此问题的最佳方法。但它有效。
更新：
幻灯片动画
$('#myCarousel').carousel({
interval: 2000,
cycle: true
});
滑动方法完成转换后调用函数
$('#myCarousel').on('slid.bs.carousel', function () {
resetChart();
})
看到它在这里工作：
JSfiddle Demo
//Sampel Line Chart
var LineChartSampleData = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
datasets: [{
label: "Sales 1",
fillColor: "transparent",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [11, 12, 13, 14, 15, 16, 17]
}, {
label: "Sales 5",
fillColor: "transparent",
strokeColor: "rgba(236, 80, 80,1)",
pointColor: "rgba(236, 80, 80,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(236, 80, 80,1)",
data: [15, 21, 35, 42, 33, 33, 81]
}]
};
//Sampel Bar Chart
var BarChartSampleData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
//Sampel Radar Chart
var RadarChartSampleData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
//Sampel Polor Chart
var PolarChartSampleData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
//Sampel Pie Doughnut Chart
var PieDoughnutChartSampleData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
window.onload = function() {
window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
responsive:true
});
window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
responsive:true
});
window.RadarChartSample = new Chart(document.getElementById("radar-chart-sample").getContext("2d")).Radar(RadarChartSampleData,{
responsive:true
});
window.PolarChartSample = new Chart(document.getElementById("polar-chart-sample").getContext("2d")).PolarArea(PolarChartSampleData,{
responsive:true
});
window.PieChartSample = new Chart(document.getElementById("pie-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
responsive:true
});
window.DoughnutChartSample = new Chart(document.getElementById("doughnut-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
responsive:true
});
};
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item item1">
<canvas id="bar-chart-sample" height="80"></canvas>
<ul class="doughnut-chart-legend">
<li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
<li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
<li class="home ultra-small"><span class="legend-color"></span> Home</li>
</ul>
</div>
<div class="item item2">
<canvas id="line-chart-sample" height="80"></canvas>
</div>
<div class="item">
<canvas id="line-chart-sample" height="80"></canvas>
</div>
</div>
<hr class="transition-timer-carousel-progress-bar" />
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我在 Bootstrap 轮播中遇到 Chart Js 问题，它没有显示，因为图表未加载，它显示为 width:0px and height:0px。最近几个小时我一直在解决这个问题，希望你们能帮助我
这是我的 Html :
<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item item1">
<canvas id="bar-chart-sample" height="80"></canvas>
<ul class="doughnut-chart-legend">
<li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
<li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
<li class="home ultra-small"><span class="legend-color"></span> Home</li>
</ul>
</div>
<div class="item item2">
<canvas id="line-chart-sample" height="80"></canvas>
</div>
<div class="item">
</div>
</div>
<hr class="transition-timer-carousel-progress-bar" />
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
图表 JS：
//Sampel Line Chart
var LineChartSampleData = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
datasets: [{
label: "Sales 1",
fillColor: "transparent",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [11, 12, 13, 14, 15, 16, 17]
}, {
label: "Sales 5",
fillColor: "transparent",
strokeColor: "rgba(236, 80, 80,1)",
pointColor: "rgba(236, 80, 80,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(236, 80, 80,1)",
data: [15, 21, 35, 42, 33, 33, 81]
}]
};
var BarChartSampleData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
window.onload = function() {
window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
responsive:true
});
window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
responsive:true
});
};
感谢您的帮助，干杯！
这是您的代码的修订版。我假设您使用的是 Chartjs 1.0.2。
HTML:(同样html只是去掉空的<div class="item"></div>)
CHARTJS：
function generateChart() {
var LineChartCanvas = $("#line-chart-sample").get(0).getContext("2d");
var LineChartSample = new Chart(LineChartCanvas);
var LineChartSampleData = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
datasets: [
{
label: "Sales 1",
fillColor: "transparent",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [11, 12, 13, 14, 15, 16, 17]
},
{
label: "Sales 5",
fillColor: "transparent",
strokeColor: "rgba(236, 80, 80,1)",
pointColor: "rgba(236, 80, 80,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(236, 80, 80,1)",
data: [15, 21, 35, 42, 33, 33, 81]
}
]
};
LineChartSample.Line(LineChartSampleData);
//Bar Chart Sample
var BarChartCanvas = $("#bar-chart-sample").get(0).getContext("2d");
var BarChartSample = new Chart(BarChartCanvas);
var BarChartSampleData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
BarChartSample.Bar(BarChartSampleData);
};
generateChart();
现在，由于您正在使用 bootstrap 轮播，因此只会显示带有 active class 的项目。 Chartjs 无法为隐藏的 canvas 元素生成图表。
一种解决方法是在触发事件后生成图表。
像这样：
function resetChart() {
//Reset chart data
$('canvas').remove();
$('.item2').prepend('<canvas id="line-chart-sample" height="80"></canvas>');
$('.item1').prepend('<canvas id="bar-chart-sample" height="80"></canvas>');
generateChart();
}
$(document).on('click', '.carousel-control', function () {
resetChart();
});
现在我不确定这是否是解决此问题的最佳方法。但它有效。
更新：
幻灯片动画
$('#myCarousel').carousel({
interval: 2000,
cycle: true
});
滑动方法完成转换后调用函数
$('#myCarousel').on('slid.bs.carousel', function () {
resetChart();
})
看到它在这里工作： JSfiddle Demo