Chart.js-如何从ZeroLine抵消条

Question

我已经花了几个小时试图弄清楚如何将水平条与X轴上的零线偏移，这样当线的宽度大于1时，它就不会重叠。

感谢所有的帮助。

示例在CodePen上（希望它会出现）：https://codepen.io/RomanKl/pen/mzmegG

var barOptions = {
tooltips: {
    enabled: false
},
hover :{
    animationDuration:0
},
scales: {
    xAxes: [{
        ticks: {
            beginAtZero:true,
          min: 0,
          max: 10000,
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize:12,
          callback: function(value, index, values) {
                    return Math.round(value/1000) + 'k';
          }
        },
        scaleLabel:{
            display:false
        },
        gridLines: {
          color: ['#000', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef', '#efefef'],
          lineWidth: [4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          zeroLineWidth: 4,
          zeroLineColor: '#000',

        }, 
    }],
    yAxes: [{
        gridLines: {
          display: false,
        },
        ticks: {
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize:14,
        },

    }]
},
legend:{
    display:false
},

animation: {
    onComplete: function () {
        var chartInstance = this.chart;
        var ctx = chartInstance.ctx;
        ctx.textAlign = "left";
        ctx.font = "1.6rem Open Sans";
        ctx.fillStyle = "#fff";

        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                data = dataset.data[index];
              data = data.toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                if(i==0){
                    ctx.fillText(data, 80, bar._model.y+4);
                } else {
                    ctx.fillText(data, bar._model.x-25, bar._model.y+4);
                }
            }),this)
        }),this);
    }
},

};

var CTX = document . getelementbyid(" chart 1 ")；

var myChart = 新图表（ctx， { 类型： “水平栏”， 边框跳过： “底部”， 数据： { 标签： [“8 月 17日”， “8 月 18 日”]，

    datasets: [{
        data: [6336, 6892],
        backgroundColor: "rgba(63,103,126,1)",
        hoverBackgroundColor: "rgba(50,90,100,1)"
    }]
},

options: barOptions,

});

Answer 1

所以我最后残忍地黑了它。我尝试过添加边框，然后跳过所有地方，除了将颜色设置为透明的开始，但猜猜怎么着？边界在开始时不显示。这是一个请求的功能，尚未在图表中实现。js截至发帖时。

最后，我使用了一个邪恶的解决方案，使用两个堆叠的数据集，同时通过数据将第一个设置为所需的偏移量，然后通过插件将背景颜色设置为透明并将数据标签向左移动。

你可以在问题中发布的codepen链接中看到结果。