canvas系列教程03-柱状图项目1

xiaolinbang 发布于2019-08-22 11:23 / 355人阅读

摘要：弄了一堆线方块和函数，感觉挺玄乎，然并卵。我们直接写个项目看看。一个比较拽的应用就是图表和游戏，我们从浅入深，先玩图表，图表我们今天说一个最简单柱状图。第三件事，数据我用的模拟，实际项目一般是后台提供。

弄了一堆线方块和函数，感觉挺玄乎，然并卵。我们直接写个项目看看。

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模拟，实际项目一般是后台提供。

云服务器 GPU云服务器柱状图画柱状图柱状图各种图形 mpandroidchart柱状图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92295.html

canvas系列教程06-柱状图项目4

摘要：最终效果图下面代码只有一个难点怎么算横轴纵轴坐标位置其余就容易多了，有一个注意问题，我其实写复杂了各种位置都是动态算的，因为实际项目你用写死的数值浏览器适配就会出问题。上一篇文章我已经说过数据准备好画图就非常简单了，如果你担心不回话好办，我给你个最简单的小例子，你先练练。showImg(https://segmentfault.com/img/remote/146000001252...

wangym 2019-08-21 18:19 评论0 收藏0
canvas系列教程04-柱状图项目2

摘要：我们提前做些准备工作，比如画图前先把坐标边距做出来，还有各种字体大小算出来。最终代码如下，模仿一月一月一月基础信息为啥这么做我懒，定义一个比例为啥是，看图大体是这个随便定的，别忒离谱就好标识准备原因同上初始化偷个懒，基础函数不写了我们提前做些准备工作，比如画图前先把坐标边距做出来，还有各种字体大小算出来。这里需要一点面向对象的知识， use strict; //模仿 http://...

Dogee 2019-08-22 11:23 评论0 收藏0