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

theRoom 2019-06-26

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

canvas一个比较拽的应用就是图表和游戏，我们从浅入深，先玩图表，图表我们今天说一个最简单柱状图。
canvas系列教程03-柱状图项目1

柱状图很多人用百度的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模拟，实际项目一般是后台提供。

theRoom

theRoom

相关推荐

用 CSS Grid 布局制作一个响应式柱状图

最新一段时间比较喜欢玩弄图表，出于好奇，我想找出比较好的用 CSS 制作图表的方案。开始学习网上开源图表库，它对我学习新的和不熟悉的前端技术很有帮助，比如这个：CSS Grid。今天和大家分享我学到的新知识：如何用 CSS Grid 布局制作一个普通的响应

waterv / 0评论 2020-05-28

只会柱状图、饼状图、折线图怎么行，来用Python画个热力图

花花世界迷人眼，东西太多不知选?万物存在即合理，不知根本，难得善法。术业有专攻，凡事不能蛮干，不知怎么画热力图，请往下看。主要用到了pandas和pyecharts这两个包，pandas用来读取我存放在Excel中的数据，pyecharts用来将数据可视化

预则立 / 0评论 2020-04-25

14-canvas绘制柱状图

<!DOCTYPE html>. margin: 0;padding: 0;display: block;margin: 0 auto;background: red;let oCtx = oCanvas.getContext("2d

MIKUScallion / 0评论 2020-01-08

echarts柱状图多组数据配置

var map4_data1=[320, 332, 301, 334, 390,360,320, 332, 301, 334, 390,360];var map4_data2=[220, 182, 191, 234, 290,320,220, 182, 1

ALLWITHLOVE / 0评论 2020-01-04

数据可视化分析（柱状图、饼图、折线图、雷达图）

3）不同性别学生成绩情况，并分别用合适的图表展示出三个内容的分析结果。from flask import Flask, jsonify, render_template, request, url_for. if grade in grade_list_r

Tonybo / 0评论 2019-12-21

python plotly画柱状图

df[‘PERMNO‘] = df[‘PERMNO‘].map # 该了下类型 此行有可无

zhglinux / 0评论 2019-12-12

Python基础教程 - matplotlib实现雷达图和柱状图

Python基础教程记录 - 使用matplotlib实现雷达图和柱状图。angles = np.linspacedata = np.concatenate # 闭合 # #将数据结合起来angles = np.concatenate # 闭合。fig =

举 / 0评论 2019-03-24

vue全家桶+Echarts+百度地图，搭建数据可视化系统

本文章篇幅略长，内容有点多大佬可根据目录选择性查阅新人可一步步来阅读1 前言1.1 业务场景突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。

Leonwey / 0评论 2019-07-01

RGraph : svg : 波动的柱状图

var labels = ['周一','周二','周三','周四','周五','周六','周日'];

Mofier / 0评论 2018-09-24

Jquery flot multi bars 多个柱状图并列显示问题

最近在用jquery的flot画图，折线图饼图都没啥问题，一到柱状图就来事了，如果多个数据源，柱子都重叠到一起了，像这样：。度娘谷哥搜了一大圈，找了一个插件，专门处理这种情况的，但是郁闷的调了半天愣是没反应，该什么样还什么样，眼看工期将至，一咬牙，看源码吧

honeyth / 0评论 2015-04-23

Grafana配置mysql展示自定义分组柱状图（Mac）

brew install grafana配置Grafana连接本地安装的mysql，mysql安装不做说明，配置文件列表如下：。brew services start grafana此时网页访问localhost:3000即为Grafana配置数据源页面。

Kingonion / 0评论 2019-06-27

jQuery 数据展现—折线图、饼图、柱状图、仪表盘

目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有

hackcat / 0评论 2015-03-05

Jqplot之柱状图

var barData = [[2,"a"], [4,"b"], [6,"c"], [3,"d"]] ;

西门吹雪 / 0评论 2014-09-15

微信小程序 基于wepy使用canvas简单的画波柱状图

<canvas canvas-id="chart" class="mychart" style="width: 600rpx;height: 600rpx"></canvas&g

laxexue / 0评论 2019-06-27

【jqPlot】jqPlot柱状图

<body>. <div id="chartContainer"/>. </body>3）柱状图。//构造数据。v

amyleeYMY / 0评论 2014-07-14

canvas系列教程05-柱状图项目3

书接上文，我们提前做些准备工作，比如画图前先把坐标边距做出来，还有各种字体大小算出来。这里需要一点面向对象的知识，var c = this;//为啥这么做？我懒，c = chart = this;因为坐标和字体都应该是动态算出来的不能是写死的否则实用性不够

Yaro / 0评论 2019-06-26

canvas系列教程04-柱状图项目2

我们提前做些准备工作，比如画图前先把坐标边距做出来，还有各种字体大小算出来。这里需要一点面向对象的知识，var c = this;//为啥这么做？我懒，c = chart = this;因为坐标和字体都应该是动态算出来的不能是写死的否则实用性不够。retu

lanseguhui / 0评论 2019-06-26

Android简易柱状图和曲线图表实现

之前有写过一个图表lib，但是开发的速度，大多很难跟上产品需求变化的脚步，所以修改了下原先的图表库，支持图表下面能整合table显示对应的类目，用曲线替换了折线，支持多曲线的显示，增加了显示的动画，，增加了一些可定制的属性，支持水平柱状图和叠加柱状图，以及

蓝蓝的天 / 0评论 2019-06-26

d3--竖直柱状图

要把水平的柱形图转换为竖直的柱形图难点：x轴和y轴的缩放转换，因为计算机的坐标系和普通几何坐标系不同。水平var data = [1, 4, 2, 5, 22, 9, 11],// bar_height=50, //相对于y轴就要改为 bar_width,

Dickzeng / 0评论 2019-06-26

柱状图-jquery

<!

hackcat / 0评论 2013-01-17

【开源】基于微信小程序 Canvas API 实现的柱状图和趋势图

onTouch: e=>this.setData //点击事件，当点击趋势图时触发，e 是事件类，e.serie 是当前点击处横坐标对应的对象，它是data的一个元素。// data的数据结构, data是一个数组，一个元素代表一个点，点击时这个点的

church / 0评论 2019-06-21

jqPlot 图形报表插件柱状图(jquery)

ticks:['区域1', '区域2', '区域3', '区域4'],

83570690 / 0评论 2012-10-29

js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等

// For horizontal bar charts, x an y values must will be "flipped". // Show point labels to the right of each bar.//

publicTIM / 0评论 2012-06-25

PHP实现动态生成饼状图、柱状图和折线图（转）

饼状图表对于查看一个值占总值的百分比是一个好的方法。我们就用PHP来实现一个饼形图表。1接受参数，得到所有数值的和，得到每一个值占数值总和的比例。

王大壮 / 0评论 2011-08-29

FusionChart新特性

FusionChartsv3比以前的版本拥有大量的新的功能。下面列出的是其中的几个主要的：。旋转的文本不需要嵌入字体了。任何UTF-8字符现在可以旋转。使FusionCharts真正的多语言使用。图表能保持Javascript函数发布后的活动。Fusion

zfszhangyuan / 0评论 2011-03-03

如何使用python绘制柱状图和散点图，这个可视化利器你一定要学会

就是电影的各个机构的评分，下面根据这份csv数据进行数据的画图操作。bar_heights=reviews[num_cols].values[0]这个程序的意思是获取该数据的一行，也就是。这样横坐标就是[0.75 1.75 2.75 3.75 4.75],

crbrave / 0评论 2019-06-16

移动开发|绘制饼图、柱状图、2d、3d统计图表

通过HTML5的canvas来绘制图表功能，需要用到web控件。iMAG内置了awesomechart.js用来显示统计图表，关于AwesomeChart的示例请参考Github上的Demo：AwesomeChartJS。Your web-browser

旸君颜 / 0评论 2016-05-31

安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图

return "The average temperature in 4 Greek islands ";String[] titles = new String[] { "Crete", "Corfu&q

源码在手 / 0评论 2013-07-14

【Android】报表、线图、饼图、柱状图 (工具整理) .

这个项目在Google Market也可以下载到。

suowolegeca / 0评论 2012-07-12

android使用Canvas画柱状图和饼图源码

Canvas draw bar charts and pie charts in android！

一只刚刚上路的猿 / 0评论 2012-04-23

angularjs实现柱状图动态加载的示例

下面链接中有一个jquery.js文件，请在index.html中引用。新建一个js文件，编写指令。这也是我第一次写指令，指令可扩展性强，还很方便，当项目中重复使用的一些效果时可以通过指令来减少冗余的代码。$scope.title = '进度条效果';

闲听风月 / 0评论 2017-12-11

Python实现绘制双柱状图并显示数值功能示例

本文实例讲述了Python实现绘制双柱状图并显示数值功能。分享给大家供大家参考，具体如下：。plt.rc#设置中文显示，否则出现乱码！更多关于Python相关内容可查看本站专题：《Python数学运算技巧总结》、《Python图片操作技巧总结》、《Pyth

学习小殿 / 0评论 2018-06-23

python3+PyQt5实现柱状图

本文通过Python3+pyqt5实现了python Qt GUI 快速编程的16章的excise例子。if not index.isValid() or 0 > row >= len:

知至 / 0评论 2018-04-24

使用pandas中的DataFrame数据绘制柱状图的方法

折线图是数据分析的一种手段，但是有时候我们也需要柱状图进行不同数据的可视化量化对比。使用pandas的DataFrame方法进行柱状图的绘制也是比较方便的。这种绘制方式确实是让人很欣喜，我觉得在一定程度上比Excel的数据处理要便捷很多。对于我这种对Exc

i徒然 / 0评论 2018-04-10

jQuery插件Echarts实现的渐变色柱状图

-- 为ECharts准备一个具备大小（宽高）的Dom -->. <div id="container" style="width: 600px;height:400px; margin: 100px auto 2

83483768 / 0评论 2017-03-23

jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制的2D堆柱状图效果。分享给大家供大家参考，具体如下：。categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']

FreeThinking / 0评论 2017-03-14

jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果。分享给大家供大家参考，具体如下：

xiaobozhu / 0评论 2017-03-09

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格

sunnylin / 0评论 2017-03-06

jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件echarts实现的多柱子柱状图效果。分享给大家供大家参考，具体如下：。var columLabel = ['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];var columName = ['

xiongfeng / 0评论 2017-03-04

python使用matplotlib绘制柱状图教程

小编之前也和大家分享过python使用matplotlib实现的折线图和制饼图效果，感兴趣的朋友们也可以点击查看，下面来看看python使用matplotlib绘制柱状图的方法吧，具体如下：。bar事实上，left，height，width，bottom这

大杂烩 / 0评论 2019-04-26

jQuery制作简单柱状图实例

本文实例讲述了jQuery制作简单柱状图的方法。分享给大家供大家参考。具体实现方法如下：。.histogram-bg-line li div,.histogram-y li{height:30px;/*控制单元格的高度及百分比的高度，使百分数与线条对其*/

87941037 / 0评论 2019-04-20

使用jQuery jqPlot插件绘制柱状图

在一个项目研发过程中，需要显示账户的资金情况，为了给客户良好的体验我们采用了柱状图形展现，绘图的过程如果使用原生态脚本绘制这样比较麻烦，时间也会比较长，所以我们选择了jqPlot插件进行绘制，这样可以节省大量的时间，也能很快就能展示给用户。

84533871 / 0评论 2019-04-19

python画柱状图--不同颜色并显示数值的方法

用python画柱状图容易，但是如何对不同柱子使用不同颜色呢？同时在柱子顶端显示精确数值？首先，前边设置的x、y值其实就代表了不同柱子在图形中的位置（坐标），通过for循环找到每一个x、y值的相应坐标――a、b，再使用plt.text在对应位置添文字说明来

Python探路者 / 0评论 2018-12-13

JQUBAR1.1 jQuery 柱状图插件发布

//提供JSON数据，方便 .net、 java、 php 调用。本例在Asp.net MVC2.0下演示。<input type="button" id="btnReloadBar" value="

dosdos / 0评论 2010-11-28

JQUBar 基于JQUERY的柱状图插件

<input type="button" id="btnReloadBar" value="重新加载" /> 截图如下:. 本例在Asp.net MVC2.0下演示。</scri

87407607 / 0评论 2010-11-23

Python读取Excel表格,并同时画折线图和柱状图的方法

今日给大家分享一个Python读取Excel表格，同时采用表格中的数值画图柱状图和折线图，这里只需要几行代码便可以实。首先我们需要安装一个Excel操作的库xlrd，这个很简单，在安装Python后直接在DOS命令下输入pip install xlrd,便

cassiePython / 0评论 2018-10-14

PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图

JpGraph是开源的PHP统计图表生成库，基于PHP的GD2图形库构建，把生成统计图的相关操作封装，隐藏了部分复杂的操作，使在PHP页面上输出统计图表变得更加容易。JpGraph的官方网站为：http://jpgraph.net，开发者可以在上面免费下载

PHP100 / 0评论 2019-03-28

php使用Jpgraph创建柱状图展示年度收支表效果示例

本文实例讲述了php使用Jpgraph创建柱状图展示年度收支表效果。分享给大家供大家参考，具体如下：。应用GD2库可以创建各式各样的图像，但是制作复杂的统计图形，仅通过GD2函数库来实现，则显得非常繁琐。PHP从诞生走向成熟经历了多次变革，在这期间，许多组

PHP100 / 0评论 2019-03-28

PHP动态柱状图实现方法

本文实例讲述了PHP动态柱状图实现方法。分享给大家供大家参考。$sql = 'select count(*) from newpro where p_date>\''.$beginDate.'\' and p_date<\''.$endDate

PHP100 / 0评论 2019-03-28