資訊專欄INFORMATION COLUMN
摘要：弄了一堆線方塊和函數(shù)，感覺挺玄乎，然并卵。我們直接寫個(gè)項(xiàng)目看看。一個(gè)比較拽的應(yīng)用就是圖表和游戲，我們從淺入深，先玩圖表，圖表我們今天說一個(gè)最簡單柱狀圖。第三件事，數(shù)據(jù)我用的模擬，實(shí)際項(xiàng)目一般是后臺提供。
弄了一堆線方塊和函數(shù)，感覺挺玄乎，然并卵。我們直接寫個(gè)項(xiàng)目看看。
canvas一個(gè)比較拽的應(yīng)用就是圖表和游戲，我們從淺入深，先玩圖表，圖表我們今天說一個(gè)最簡單柱狀圖。
柱狀圖很多人用百度的echars,那么我們會用更要會寫，為啥？我見過太多的人問我echarts不可能完全符合他們公司的需求，隨便改一點(diǎn)東西就不搞了，簡單的說我們要做開發(fā)者，而不是一個(gè)js庫的搬運(yùn)工，我們今天就參考這個(gè)效果http://echarts.baidu.com/demo...，寫一個(gè)。
無話可說先搭架子。
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
// 偷個(gè)懶，基礎(chǔ)函數(shù)不寫了
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;
}
說三件事，
第一件事，搭好架子，后面寫代碼舒服。這里用的面向?qū)ο蠓绞健?/p>
第二件事，基礎(chǔ)的函數(shù)我就不寫了，但是你寫過100遍以上完全懂可以偷懶，否則老老實(shí)實(shí)自己研究明白他。
第三件事，數(shù)據(jù)我用的data模擬，實(shí)際項(xiàng)目一般是后臺提供。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92295.html
摘要：最終效果圖下面代碼只有一個(gè)難點(diǎn)怎么算橫軸縱軸坐標(biāo)位置其余就容易多了，有一個(gè)注意問題，我其實(shí)寫復(fù)雜了各種位置都是動態(tài)算的，因?yàn)閷?shí)際項(xiàng)目你用寫死的數(shù)值瀏覽器適配就會出問題。 上一篇文章我已經(jīng)說過數(shù)據(jù)準(zhǔn)備好畫圖就非常簡單了，如果你擔(dān)心不回話好辦，我給你個(gè)最簡單的小例子， 你先練練。showImg(https://segmentfault.com/img/remote/146000001252...
摘要：我們提前做些準(zhǔn)備工作，比如畫圖前先把坐標(biāo)邊距做出來，還有各種字體大小算出來。最終代碼如下，模仿一月一月一月基礎(chǔ)信息為啥這么做我懶，定義一個(gè)比例為啥是，看圖大體是這個(gè)隨便定的，別忒離譜就好標(biāo)識準(zhǔn)備原因同上初始化偷個(gè)懶，基礎(chǔ)函數(shù)不寫了 我們提前做些準(zhǔn)備工作，比如畫圖前先把坐標(biāo)邊距做出來，還有各種字體大小算出來。 這里需要一點(diǎn)面向?qū)ο蟮闹R， use strict; //模仿 http://...
閱讀 3998·2021-11-18 13:21
閱讀 4817·2021-09-27 14:01
閱讀 3125·2019-08-30 15:53
閱讀 2401·2019-08-30 15:43
閱讀 1745·2019-08-30 13:10
閱讀 1525·2019-08-29 18:39
閱讀 899·2019-08-29 15:05
閱讀 3354·2019-08-29 14:14
