为了账号安全,请及时绑定邮箱和手机立即绑定

Chart.js 水平条自定义

Chart.js 水平条自定义

holdtom 2022-06-09 18:55:03
我正在尝试使用 chartJS 实现水平条形图。原型是这样的:但是我在实施负值时遇到了问题。您能否就如何在同一张图表上使用不同方向的条形图提供一些帮助?
查看完整描述

2 回答

?
慕桂英3389331

TA贡献2036条经验 获得超8个赞

实际上没有办法用chartJS框架创建这样的图表。所以我不得不用js来操作图表数据(和颜色)来得到结果。如果有人对更多细节感兴趣,我可以。



查看完整回答
反对 回复 2022-06-09
?
猛跑小猪

TA贡献1858条经验 获得超8个赞

可以使用浮动条来完成具有不同方向的绘制条。使用语法指定各个条形图[min, max]。此功能是在Chart.js v2.9.0中引入的。


new Chart(document.getElementById('canvas'), {

  type: 'horizontalBar',

  data: {

    labels: [1, 2, 3, 4],

    datasets: [{

      label: 'data',

      data: [[-3, 0], [0, 6], [-4, 0], [0, 5]],

      backgroundColor: ['red', 'blue', 'green', 'orange']

    }]

  },

  options: {

    responsive: true,

    legend: {

      display: false

    },

    title: {

      display: false

    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<canvas id="canvas" height="90"></canvas>


查看完整回答
反对 回复 2022-06-09
  • 2 回答
  • 0 关注
  • 142 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信