用chart.js添加動態(tài)背景圖
更新時間：2022年06月30日 17:09:53 作者：前端小白的江湖路
這篇文章主要為大家詳細介紹了用chart.js添加動態(tài)背景圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了用chart.js添加動態(tài)背景圖的具體代碼，供大家參考，具體內容如下
1.效果圖：
2.HTML
<div class="background-image"> ?? ??? ??? ?<canvas id="drawing"> ?? ??? ??? ?</canvas> ?? ??? ?</div>
2.Javascript
function drawBar(){
?? ?var drawing=document.getElementById("drawing");
?? ?var ctx=drawing.getContext("2d");
?? ?var data = {
?? ? ? ?labels: produceLabels(20),
?? ? ? ?datasets: [
?? ? ? ? ? ?{
?? ? ? ? ? ? ? ?label:"",
?? ? ? ? ? ? ? ?borderWidth: 1,
?? ? ? ? ? ? ? ?data:produceRandom(20),
?? ? ? ? ? ?}
?? ? ? ?]
?? ?};
?
?? ?var options={
?? ??? ?scales:{
?? ??? ??? ?xAxes:[{
?? ??? ??? ??? ?display:false
?? ??? ??? ?}],
?? ??? ??? ?yAxes:[{
?? ??? ??? ??? ?display:false
?? ??? ??? ?}]
?? ??? ?},
?? ??? ?tooltips:{
?? ??? ??? ?enabled:false
?? ??? ?},
?? ??? ?legend:{
?? ??? ??? ?display:false
?? ??? ?}
?? ?};
?? ?var parameters={
?? ??? ?type:"bar",
?? ??? ?data:data,
?? ??? ?options:options
?? ?}
?
?? ?new Chart(ctx,parameters);
}
?
var num=0;
var max=1000;
function setBackground(){
?? ?num++;
?? ?drawBar()
?? ?if(num<max)
?? ?{
?? ??? ?window.setTimeout(setBackground,3000);
?? ?}
}
?
setBackground();
?
//生成隨機數(shù)
function produceRandom(len){
?? ?var random_array=[];
?? ?for(var i=0;i<len;++i)
?? ?{
?? ??? ?random_array.push(Math.random()*100+1);
?? ?}
?
?? ?return random_array;
}
?
function produceLabels(len){
?? ?var label_array=[];
?? ?for(var i=0;i<len;++i)
?? ?{
?? ??? ?label_array.push("");
?? ?}
?? ?return label_array;
}是不是超級簡單呢！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript增加數(shù)組中指定元素的5種方法總結
在JS中數(shù)組方法是非常重要且常用的的方法,在此整理總結一番,下面這篇文章主要給大家介紹了關于JavaScript增加數(shù)組中指定元素的5種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
Javascript獲取與設置ckeditor數(shù)據的實現(xiàn)方法
最近編輯器后臺升級成了ckeditor,但原來后臺有很多對應編輯器內容的替換功能,那么就需要用js獲取ckeditor編輯器里面的內容,這里就為大家介紹一下具體的實現(xiàn)方法2023-08-08
JS提示：Uncaught SyntaxError:Unexpected token ) 錯誤的解決方法
這篇文章主要介紹了JS提示：Uncaught SyntaxError:Unexpected token ) 錯誤的解決方法,結合實例形式分析了javascript提示此類異常的常見原因與相關解決方法,需要的朋友可以參考下2016-08-08
JavaScript 實現(xiàn) Tab 點擊切換實例代碼
Tab 選項卡切換效果在現(xiàn)如今的網頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文里，我們是通過原生 JavaScript 來實現(xiàn) Tab 點擊切換的效果。2017-03-03
JS樹形菜單組件Bootstrap TreeView使用方法詳解
這篇文章主要為大家詳細介紹了js組件Bootstrap TreeView使用方法，本文一部分針對于bootstrap的treeview的實踐，另一部分是介紹自己寫的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了使用phantomjs進行網頁抓取的實現(xiàn)代碼,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調用實例，這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件，需要的朋友可以參考下2023-01-01
javascript基于prototype實現(xiàn)類似OOP繼承的方法
這篇文章主要介紹了javascript基于prototype實現(xiàn)類似OOP繼承的方法,實例分析了JavaScript使用prototype實現(xiàn)面向對象程序設計的中類繼承的相關技巧,需要的朋友可以參考下2015-12-12
今天小編就為大家分享一篇layui 給數(shù)據表格加序號的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript對象就是一組屬性（方法）的集合 在該語言中如果變量名或方法名不符合聲明規(guī)范，則一定得用方括號“ [] ”引用它2010-12-12