資訊專欄INFORMATION COLUMN
摘要：弄了一堆線方塊和函數，感覺挺玄乎，然并卵。我們直接寫個項目看看。一個比較拽的應用就是圖表和游戲，我們從淺入深，先玩圖表，圖表我們今天說一個最簡單柱狀圖。第三件事，數據我用的模擬，實際項目一般是后臺提供。
弄了一堆線方塊和函數，感覺挺玄乎，然并卵。我們直接寫個項目看看。
canvas一個比較拽的應用就是圖表和游戲，我們從淺入深，先玩圖表，圖表我們今天說一個最簡單柱狀圖。
柱狀圖很多人用百度的echars,那么我們會用更要會寫，為啥？我見過太多的人問我echarts不可能完全符合他們公司的需求，隨便改一點東西就不搞了，簡單的說我們要做開發者，而不是一個js庫的搬運工，我們今天就參考這個效果http://echarts.baidu.com/demo...，寫一個。
無話可說先搭架子。
index.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模擬，實際項目一般是后臺提供。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92295.html
摘要：最終效果圖下面代碼只有一個難點怎么算橫軸縱軸坐標位置其余就容易多了，有一個注意問題，我其實寫復雜了各種位置都是動態算的，因為實際項目你用寫死的數值瀏覽器適配就會出問題。 上一篇文章我已經說過數據準備好畫圖就非常簡單了，如果你擔心不回話好辦，我給你個最簡單的小例子， 你先練練。showImg(https://segmentfault.com/img/remote/146000001252...
摘要：我們提前做些準備工作，比如畫圖前先把坐標邊距做出來，還有各種字體大小算出來。最終代碼如下，模仿一月一月一月基礎信息為啥這么做我懶，定義一個比例為啥是，看圖大體是這個隨便定的，別忒離譜就好標識準備原因同上初始化偷個懶，基礎函數不寫了 我們提前做些準備工作，比如畫圖前先把坐標邊距做出來，還有各種字體大小算出來。 這里需要一點面向對象的知識， use strict; //模仿 http://...
閱讀 3952·2021-11-18 13:21
閱讀 4759·2021-09-27 14:01
閱讀 3110·2019-08-30 15:53
閱讀 2388·2019-08-30 15:43
閱讀 1730·2019-08-30 13:10
閱讀 1508·2019-08-29 18:39
閱讀 887·2019-08-29 15:05
閱讀 3340·2019-08-29 14:14
