zoukankan      html  css  js  c++  java
  • chart.js horizontalBar,标签在柱形内显示

    chart.js做横向柱形图(horizontalBar),默认是像下面这样的:

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

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

     1         new Chart(canvas, {
     2             type: 'horizontalBar',
     3             data: {
     4                 labels: ['东邪', '西毒', '南帝', '北丐', '中神通'],
     5                 datasets: [{
     6                     backgroundColor: 'rgba(205, 88, 100, 0.3)',
     7                     borderColor: 'rgb(205, 88, 100)',
     8                     data: [100, 200, 300, 400, 500]
     9                 }]
    10             },
    11             options: {
    12                 title: {
    13                     display: false
    14                 },
    15                 legend: {
    16                     display: false
    17                 },
    18                 scales: {
    19                     xAxes: [{
    20                         ticks: {
    21                             beginAtZero: true
    22                         }
    23                     }],
    24                     yAxes: [{
    25                         ticks: {
    26                             mirror: true // 只需将 mirror 设为 true 即可达到想要的效果
    27                         }
    28                     }]
    29                 }
    30             }
    31         });
    只需将 mirror 设为 true 即可达到想要的效果。

    运行效果如下:

  • 相关阅读:
    C++疑难杂症
    程序中的错误、异常处理框架设计
    客户端ARPG角色行为模型
    http协议
    MySQL数据库开发(2)
    MySQL数据库开发(1)
    网络编程进阶及并发编程
    网络编程-SOCKET开发
    面向对象编程
    常用模块
  • 原文地址:https://www.cnblogs.com/mafengzi/p/12846863.html
Copyright © 2011-2022 走看看