数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)

最新推荐文章于 2021-12-13 17:04:29 发布
最新推荐文章于 2021-12-13 17:04:29 发布
阅读量4k 收藏 12
点赞数
分类专栏： 数据可视化 前端编程 文章标签： javascript 前端 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36288559/article/details/112306541
版权

Bar——（柱状图/条形图）

柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。
官方文档：https://www.chartjs.org/docs/latest/charts/bar.html#barthickness

用法示例
var myBarChart = new Chart(ctx, {
type: ‘bar’,
data: data,
options: options
});
在这里插入图片描述

图表属性（博主这边只列举看出了比较常用和设置影响明显的属性）

属性描述类型默认值
label图例和工具提示中显示的数据集标签，表现为横坐标。string‘’
backgroundColor条形背景颜色。Color‘rgba(0, 0, 0, 0.1)’
borderColor条形边框的颜色。Color‘rgba(0, 0, 0, 0.1)’
borderSkipped绘制条时要跳过的边缘。string‘bottom’
borderWidth条形边框的宽度（以像素为单位）。number/object0
hoverBackgroundColor悬停时的酒吧背景颜色。Colorundefined
hoverBorderColor悬停时的条形边框颜色。Colorundefined
hoverBorderWidth悬停时的条形边框宽度（以像素为单位）。number1
barPercentage每个条形图的可用宽度的百分比（0-1）number0.9
categoryPercentage每个类别的可用宽度的百分比（0-1）number0.9
barThickness手动设置每个条的宽度（以像素为单位）。number
maxBarThickness设置此项以确保条的大小不大于此值。number
minBarLength设置此项以确保条形的最小长度（以像素为单位）。number

相关属性详解

borderSkipped 绘制条时要跳过的边缘。一段条并不是所有的边都存在边框的，borderSkipped 就是设置不存在边框的条边的位置。存在：‘bottom’，‘left’，‘top’，‘right’，false等值。注意：对于垂直图中的负条，top并且bottom已翻转。这同样适用于left和right水平的图表。

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             borderSkipped:"bottom",//默认为底部
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             borderWidth: 1
           }]
           },
     options: options
});

在这里插入图片描述

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             borderSkipped:"top",//默认为底部
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             borderWidth: 1
           }]
           },
     options: options
});

在这里插入图片描述

categoryPercentage 每个类别的可用宽度的百分比，范围为0-1，什么意思，每个类别可占最大宽度=图表宽度/类别个数，此时求值为每个类别可占最大宽度，也就是categoryPercentage =1的情况，其他数值，都以此为基数可求出当前类别所占宽度，可求出。默认categoryPercentage=0.8
barPercentage 每个条形图的可用宽度的百分比，范围为0-1，这是相对于当前类别所占宽度。即可求出当前条所占宽度。默认值barPercentage =0.9。
注意当categoryPercentage=1，barPercentage =1，此时条宽度与类别所占宽度均已达到最大。

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             categoryPercentage:1,
             barPercentage:1,
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             borderWidth: 1
           }]
           },
     options: options
});

在这里插入图片描述

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             categoryPercentage:0.8,//默认
             barPercentage:0.9,//默认
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             borderWidth: 1
           }]
           },
     options: options
});

在这里插入图片描述

barThickness 如果此值为数字，则将其应用于每个条的宽度（以像素为单位）。当这是强制执行，barPercentage并categoryPercentage会被忽略。
如果设置为’flex’，则将根据之前和之后的样本自动计算基本样本宽度，以使它们采用全部可用宽度而不会重叠。然后，使用barPercentage和调整尺寸categoryPercentage。百分比选项为1时没有间隙。当数据未均匀分布时，此模式会生成宽度不同的条。
如果未设置（默认值），则使用防止条形重叠的最小间隔来计算基本样本宽度，并使用barPercentage和设置条形大小categoryPercentage。此模式始终生成大小相等的条。

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             categoryPercentage:1,
             barPercentage:1,
             barThickness:'30',
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             borderWidth: 1
           }]
           },
     options: options
});

在这里插入图片描述

拓展

1-多数据集（多柱状图）
在这里插入图片描述

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
          {
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             backgroundColor: backgroundColor1,
             borderColor: borderColor1,
             borderWidth: 1
         },
         {
             label: '# of Votes',
             data: [18,24,10,3,6,21],
             backgroundColor: backgroundColor2,
             borderColor: borderColor2,
             borderWidth: 1
         },
         ]
         },
     options: options
});

2-水平柱状图（horizontalBar）
在这里插入图片描述

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
          {
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             backgroundColor: backgroundColor1,
             borderColor: borderColor1,
             borderWidth: 1
         },
         {
             label: '# of Votes',
             data: [18,24,10,3,6,21],
             backgroundColor: backgroundColor2,
             borderColor: borderColor2,
             borderWidth: 1
         },
         ]
         },
     options: options
});

3-水平多柱状图

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
          {
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             backgroundColor: backgroundColor,
             borderColor: borderColor,
             borderWidth: 1
         },
         ]
         },
     options: options
});

在这里插入图片描述
4-堆叠图（对应位置数据依次累加）
在这里插入图片描述

let ctx = document.getElementById("myChart3");
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
          {
             label: '# of Votes',
             data: [22,12,5,12,4,21],
             backgroundColor: backgroundColor1,
             borderColor: borderColor1,
             borderWidth: 1
         },
         {
             label: '# of Votes',
             data: [18,24,10,3,6,21],
             backgroundColor: backgroundColor2,
             borderColor: borderColor2,
             borderWidth: 1
         },
         ]
         },
     options: {
         scales: {
               yAxes: [{
                    ticks: {
                         beginAtZero: true
                    },
                    stacked: true,
               }],
               xAxes: [{
                    ticks: {
                         beginAtZero: true
                    },
                    stacked: true,
               }]
         }
  	}
});

数据可视化清新版【chart.js】学习笔记

01.数据可视化清新版【chart.js】学习笔记1.0—介绍
02.数据可视化清新版【chart.js】学习笔记2.0—项目引入
03.数据可视化清新版【chart.js】学习笔记3.0—折线图（Line）
04.数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)
05.数据可视化清新版【chart.js】学习笔记5.0—雷达图(Radar)
06.数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)
07.数据可视化清新版【chart.js】学习笔记7.0—环形图(Doughnut )
08.数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
09.数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)
10.数据可视化清新版【chart.js】学习笔记10.0—离散图(Scatter Chart)
11.数据可视化清新版【chart.js】学习笔记11.0—混合图表
12.数据可视化清新版【chart.js】学习笔记12.0—面积图表
13.数据可视化清新版【chart.js】学习笔记13.0—图表配置
14.数据可视化清新版【chart.js】学习笔记14.0—数据更新

LIMI_伞梦
关注
专栏目录
Bar 图
Rockyoung
08-06 512
import matplotlib.pyplot as plt import numpy as np import matplotlib.pyplot as plt import pandas as pd import numpy as np # coding:utf-8 import pylab import matplotlib.ticker as plticker from matplotlib.pyplot import MultipleLocator import xlrd import matp
Bar：柱状图/条形图
zhaoyangjian724的专栏
12-29 1588
Bar：柱状图/条形图 柱状图对应的模块是 Bar 除此之外可以设置全局配置和系列配置项。配置项都是基于 options from pyecharts import options as opts from pyecharts.charts import Bar def bar_base(): bar = Bar(init_opts=opts.InitOpts(page_title...
Chart.js-柱状图分析（参数分析+例图）
十一月廿七风雨大作
06-13 2915
Chart.js-柱状图分析（参数分析+例图）柱状图样式总览基本写法参数解析条形图1 - 普通条形图条形图2 - 水平条形图条形图3 - 同比（放在一起比较）条形图条形图4 - 叠加条形图 柱状图样式总览 基本写法 首先在< script >标签里面引入chart.js： <script src="chart.js/Chart.js"></script> 然后创建一个画布： <canvas id="myChart" width="400" height="400
"柱状图"组件:<chart-bar> —— 快应用组件库H-UI
H-UI官方博客
04-17 961
触摸反馈： <import name="chart-bar" src="../Common/ui/h-ui/chart/c_chart_bar"></import> <template> <div class="container-full"> <chart-bar id="canvas1" data="{{data...
python画横条形图-用matplotlib画条形图（bar）
weixin_37988176的博客
11-01 1395
条形图（bar chart）和直方图（histogram）有点相似，但也有本质的区别。条形图主要用于对可分类的数据（quanlitative data），而直方图主要是对连续数据进行分段（quantitative data）。但也有一些作者，将两者混在一起说明。matplotlib.pyplot.bar是专门用来画条形图的接口，本文总结其用法，并给出代码示例。import matplotlib.p...
Python数据可视化 Pyecharts 制作 Bar 柱状、条形图
热门推荐
Mr数据杨
02-22 4万+
大家好，我是Mr数据杨，想象一下，我们正在阅读一场周瑜精心策划的赤壁之战，火光在柱状图/条形图（Bar）上熊熊燃烧。在基本设置中，定义了这场战役的大小，范围和时间。然后，在坐标轴设置中，对战役的每一个阶段进行标记，像是那关键的东风之夜，或者那个蔡瑁杨允带领舰队投降的时刻。
基于python的数据可视化.docx
最新发布
12-21
数据可视化是将复杂的数据集转换成视觉元素的过程，目的是揭示数据中的模式、趋势和关联，以便于理解。在Python中，有多个强大的库用于数据可视化，包括Pandas、Matplotlib和Seaborn，以及专门针对网页可视化的...
学习笔记：python数据分析：5.Python + PyEcharts——数据可视化（上）
weixin_42850424的博客
05-20 605
为什么用Pyecharts 与Echarts结合 与Web端结合 超强交互性 国人开发的项目 安装Pyecharts pip install pyecharts 图表绘制流程 chart_name = 图表类型() 初始化具体类型图表。 chart_name.add_xaxis() 添加横坐标名称。 chart_name.add_yaxis() 添加纵坐标数据。 chart_name.render() 生成 .html 文件。 新建一个Python文件 导入pyecharts模块及随机虚构数据模块 f
Python数据可视化——pyecharts学习笔记
yeyuanxiaoxin的博客
02-15 5310
导读：Python数据可视化的库有很多，常见的有matplotlib、pyplot、Seaborn、pyecharts等。 pyecharts是一款将python与echarts相结合的数据可视化库，可用于制作 Echarts 图表，输出动态的可视化图表，。Echarts 是百度开源的一个数据可视化 JS 库。 以下基于win系统的Python3版本pyecharts0.5.10进行。 py...
【Python数据分析与可视化】期末复习笔记整理（不挂科）
风口IT猪的成长录
12-13 7050
【Python数据分析与可视化】期末复习笔记3. NumPy数值计算基础忘了的函数ndarray 对象属性和数据转换4. Pandas统计分析 3. NumPy数值计算基础 忘了的函数 linspace(start, end, count)：创建等差数列 logspace(start, end, count)：创建等比数列 diag：创建对角矩阵，即对角线元素为0或指定值，其他元素为0 eye：创建一个对角线位置为1，其他位置全为0的矩阵 sort：axis=1，沿横轴排序，axis=0，沿着纵轴排序.
js chart js柱状图
02-28
js chart js柱状图 js配合数据 生成动态柱状图 包含源代码
C# ChartBar直观图
01-15
附件为 ChartBar直观图 C#例子
实现Q版的数据可视化图，让你的数据看起来更美观
qq_46614154的博客
05-13 516
前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 cutecharts简介 Matplotlib默认主题下绘制的可视化图形如一位高贵冷艳、不沾烟火的冰山女神，而cutecharts的图就像不拘常规、潇洒不羁的活力少年。 纤尘不染vs洒脱无畏 cutecharts[1]是基于chart.xkcd的Python可视化库，chart.xkcd[2]则是基于SVG来绘制可视化图表的JavaScript库，cutec..
MatLab（第四讲：bar图）_追逐梦想的顾咏丰_新浪博客
Yongfeng's Blog
10-20 1584
经历了 plot 图的洗礼，剩下的图就比较好做了，这一讲注重介绍 bar 图，及其相关。bar图（直方图）是我们在写论文或者统计时用的比较多的图形之一，也是matlab最基本的图形之一。 还是以一个简单的直方图为例，此图描绘了公司今年4个季度的报表，使用直方图，直接调用bar()函数即可，具体用法 bar(x, y) 或 bar(x, y, width)，x，y代表横纵坐标的数值，...
chart.js自定义图表之柱状图
weixin_45638909的博客
12-11 463
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>如何绘制柱状图</title> <script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script> <script type="text/javascript" src="js
Echart-条状图bar
jianghaha2011的博客
04-15 458
chartBar_industry: function (docm) { let myColor = ["#008ce3", "#06d7de"]; let option = { color: myColor, legend: { data: ["2019营收额", "2020营收额"], ...
bar(柱状图/条形图)_柱状商店-何时/如何/为什么？
weixin_26746861的博客
07-17 683
bar(柱状图/条形图)Long ago data storage was simple — heapfiles and b-trees and that's it. Today the options are overwhelming — ORC, Parquet, Avro on HDFS or S3 or a RDBMS solution like Postgresql, MariaDB, ...
chart.js使用学习——柱状图（1：基本用法)
gc_2299的博客
09-21 3422
学习chart.js中柱状图的基本用法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值