canvas系列教程03-柱状图项目1
生活随笔
收集整理的這篇文章主要介紹了
canvas系列教程03-柱状图项目1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
弄了一堆線方塊和函數，感覺挺玄乎，然并卵。我們直接寫個項目看看。
canvas一個比較拽的應用就是圖表和游戲，我們從淺入深，先玩圖表，圖表我們今天說一個最簡單柱狀圖。
柱狀圖很多人用百度的echars,那么我們會用更要會寫，為啥？我見過太多的人問我echarts不可能完全符合他們公司的需求，隨便改一點東西就不搞了，簡單的說我們要做開發者，而不是一個js庫的搬運工，我們今天就參考這個效果http://echarts.baidu.com/demo...，寫一個。
無話可說先搭架子。
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>尼古拉斯·屌·大彬哥</title><link rel="stylesheet" href="style.css" rel="stylesheet"><script src="index.js"></script> </head> <body><div id="div1">這里留著畫圖用</div> </body> </html>index.js
'use strict'; //模仿 http://echarts.baidu.com/demo.html#bar-gradient window.onload = function(){var data = [{"label":"一月","value":getRandomInt(0,400)},{"label":"一月","value":getRandomInt(1,400)},{"label":"一月","value":getRandomInt(1,400)}];var targetId = 'bchart';var cw = 800;var ch = 600;function Bcharts(targetId,cw,ch,data){console.log(arguments);}var charts = new Bcharts(targetId,cw,ch,data); }; //https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random // 偷個懶，基礎函數不寫了 function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive }style.css
#div1{width:800px;height:600px;border: 1px solid #000;margin: 0 auto; }說三件事，
第一件事，搭好架子，后面寫代碼舒服。這里用的面向對象方式。
第二件事，基礎的函數我就不寫了，但是你寫過100遍以上完全懂可以偷懶，否則老老實實自己研究明白他。
第三件事，數據我用的data模擬，實際項目一般是后臺提供。
總結
以上是生活随笔為你收集整理的canvas系列教程03-柱状图项目1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jsTree如何自定义节点的icon
- 下一篇： exe程序 反编译