http://www.chartjs.org/ 에서 내가하려는 작업의 예를 참조 하십시오 . 항상 막대 그래프가 움직이는 헤더를 복제하려고합니다. 나는 거기에 일하기 위해 노력했지만 작동하지 않는 것 같습니다. 나는 그들이 가지고 있음을 알 수 있습니다
<div class="aspect-ratio">
<canvas width='1200' height='480' id="hero-bar"></canvas>
<header>
</header>
</div>
그리고 이것이 작동하게 만든 js라고 생각했습니다.
<script type="text/javascript">
(function(){
var data = [],
barsCount = 50,
labels = new Array(barsCount),
updateDelayMax = 500,
$id = function(id){
return document.getElementById(id);
},
random = function(max){ return Math.round(Math.random()*100)},
helpers = Chart.helpers;
Chart.defaults.global.responsive = true;
for (var i = barsCount - 1; i >= 0; i--) {
data.push(Math.round(Math.random() * 100));
};
new Chart($id('hero-bar').getContext('2d')).Bar({
labels : labels,
datasets : [{
fillColor : '#2B303B',
data : data
}]
},{
showScale : false,
barShowStroke : false,
barValueSpacing: 1,
showTooltips : false,
onAnimationComplete : function(){
// Get scope of the hero chart during updates
var heroChart = this,
timeout;
// Stop this running every time the update is fired
this.options.onAnimationComplete = randomUpdate;
this.options.animationEasing = 'easeOutQuint';
randomUpdate();
function randomUpdate(){
heroChart.stop();
clearTimeout(timeout);
// Get a random bar
timeout = setTimeout(function(){
var randomNumberOfBars = Math.floor(Math.random() * barsCount),
i;
for (i = randomNumberOfBars - 1; i >= 0; i--) {
heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
};
heroChart.update();
},Math.random() * updateDelayMax);
};
}
});
});
</script>
이 작업을 수행하는 방법에 대한 아이디어가 있습니까?
ChartJS.org에서 무작위로 변경되는 Hero의 작동 버전입니다.
var data = [],
barsCount = 50,
labels = new Array(barsCount),
updateDelayMax = 500,
$id = function(id){
return document.getElementById(id);
},
random = function(max){ return Math.round(Math.random()*100)},
helpers = Chart.helpers;
Chart.defaults.global.responsive = true;
for (var i = barsCount - 1; i >= 0; i--) {
data.push(Math.round(Math.random() * 100));
};
new Chart($id('hero-bar').getContext('2d')).Bar({
labels : labels,
datasets : [{
fillColor : '#2B303B',
data : data
}]
},{
showScale : false,
barShowStroke : false,
barValueSpacing: 1,
showTooltips : false,
onAnimationComplete : function(){
// Get scope of the hero chart during updates
var heroChart = this,
timeout;
// Stop this running every time the update is fired
this.options.onAnimationComplete = randomUpdate;
this.options.animationEasing = 'easeOutQuint';
randomUpdate();
function randomUpdate(){
heroChart.stop();
clearTimeout(timeout);
// Get a random bar
timeout = setTimeout(function(){
var randomNumberOfBars = Math.floor(Math.random() * barsCount),
i;
for (i = randomNumberOfBars - 1; i >= 0; i--) {
heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
};
heroChart.update();
},Math.random() * updateDelayMax);
};
}
});
body{ background-color: ivory; }
#canvas{border:1px solid red;}
.aspect-ratio{background-color:#232830}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div class="aspect-ratio">
<canvas width='1200' height='480' id="hero-bar"></canvas>
<header></header>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다