当前位置: 首页 > web >正文

horizontalBar标签在柱形内显示

用chart.js做横向柱形图(horizontalBar),默认是像下面这样的:
在这里插入图片描述

但是最近遇到个需求,需要将Y轴的那些标签(东邪、西毒等等)显示在柱形上。

Google了好久,终于找到了解决方法。代码如下:

new Chart(canvas, {
type: 'horizontalBar',
data: {
labels: ['东邪', '西毒', '南帝', '北丐', '中神通'],
datasets: [{
backgroundColor: 'rgba(205, 88, 100, 0.3)',
borderColor: 'rgb(205, 88, 100)',
data: [100, 200, 300, 400, 500]
}]
},
options: {
title: {
display: false
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}],
yAxes: [{
ticks: {
mirror: true // 只需将 mirror 设为 true 即可达到想要的效果
}
}]
}
}
});

只需将 mirror 设为 true 即可达到想要的效果。
在这里插入图片描述

http://www.xdnf.cn/news/11809.html

相关文章:

  • symantec病毒服务器的部署及配置
  • 3、QT制作个人资料界面
  • editplus发布3.01 Build 446 Final版(附下载及中文版)
  • 【python ascii码转中文】1分钟教你编码转换
  • 常见网络协议汇总
  • Android 中的 NDK 到底是什么?(详细解析+案例实战)
  • 嵌入式迅为4412开发板学习开发从零开始嵌入式入门
  • LBS(基于位置服务(Location Based Service))
  • matlab从投影重建图像,由投影重建图像
  • web测试----死链检查(Xenu)
  • echarts柱状图,柱体使用图片显示vue
  • 以太坊P2P网络及节点发现机制
  • 免费域名和空间搭建个人网站——服务器篇
  • 第5章 彩色数字图像基础
  • 搜索引擎提交入口,导航站登陆入口大全
  • Windows App开发之常用控件与应用栏
  • 网关协议
  • 手把手教你破解无线路由器密码
  • 私有云平台下的存储架构规划设计
  • 安阳工学院c语言期末考试题库,安阳工学院期末C语言答案.doc
  • 纯小白从0开始root小米手机(MIUI14)及隐藏root使用银行app
  • 怎么制作GIF动图?教你这几个简单方法
  • 圣安地列斯2.0汉化补丁_[只知道圣安地列斯有热咖啡,没想到《GTA5》也这么污...
  • 【强烈推荐】基于stm32的OLED各种显示实现(含动态图)
  • MathType 数学公式编辑器[Baidu]
  • Ext.Net-----GridPanel (属性|方法|配置|详细介绍)
  • 陈建宝同志被授予“2021中国经济年度人物“荣誉称号
  • 浅谈显 ipqq 发展历程 【附显 ipqq原理】
  • 一个可以重复遍历的RowSet
  • 解决系统缺少Windows.Web.Http.dll文件无法启动程序问题