• 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 即可达到想要的效果。

    运行效果如下:

  • 相关阅读:
    solr的学习
    springMvc学习地址新
    mybatis教程
    spring学习地址
    spring思想分析
    java中反射讲解及实例
    学习地址
    linux常用命令
    XML Data Type Methods(一)
    Ruby中 使用Builder Xml Markup 操作XML
  • 原文地址:https://www.cnblogs.com/mafengzi/p/12846863.html
Copyright © 2020-2023  润新知