Style Chart.js浮动条形图

3j86kqsm  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(205)

我在Chart.js中创建了一个图表,如下所示:

(Full代码:https://codepen.io/LondonAppDev/pen/RwMBxPX

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Range',
            data: [
              {x: 'A', y: [100, 200]},
              {x: 'B', y: [50, 120]}
            ],
          backgroundColor: ['red']
        }]
    },
    options: {
      barThickness: 1,
    }
});

我正在尝试设计栏的样式,使它们在顶部和底部有这样的标记:

我已经研究过CSS,但它不会工作,因为元素是在画布内。
我想知道是否有一个风格的选择,将实现这一点?

xpcnnkqh

xpcnnkqh1#

我认为有两个选择:
1.使用图表误差线插件:https://github.com/sgratzl/chartjs-chart-error-bars
1.开发自己插件来实现这一点。
在下面的片段中,你可以找到选项2(自己的插件)
第一个

相关问题