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（“ Chart1”）;

var myChart =新图表（ctx，{ 类型：“ horizontalBar”， borderSkipped：'底部'，数据：{ 标签：[“ Aug.'17”，“ Aug.'18”]，

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

options: barOptions,

}）;

Answer 1

因此，我最终还是对其进行了残酷的入侵。我尝试添加边框，然后将其跳过所有地方，除了开始时，我将颜色设置为透明，但您猜怎么着？边框一开始没有显示。截至本文发布时，此功能尚未在chart.js中实现。

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

您可以在问题中张贴的代码笔链接中查看结果。

Chart.js-如何从ZeroLine偏移条形

1 个答案: