Question

我正在使用chartjs创建一个新图表。我设法创建了一个堆积的水平条形图，其中一个堆积的条形具有正值和负值，但是当我尝试使用autoSkipPadding时，它也删除了我的0 tick / grid。

我尝试使用autoSkipPadding设置中的数字进行操作，但这实际上没有用。


var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            datasets: [
                {
                    label: 'blue',
                    data: [-20.7],
                    backgroundColor: [
                        'rgba(0, 113, 188, 0.5)'
                    ]
                },
                {
                    label: 'red',
                    data: [11.4],
                    backgroundColor: [
                        'rgba(241, 90, 36, 0.5)'
                    ]
                }
            ]
        },
        options: {
            scales: {
                xAxes: [
                    {
                        stacked: true,
                        ticks: {
                            beginAtZero: true,
                            autoSkip: true,
                            autoSkipPadding: 4,
                            padding: 8,
                            fontSize: 14,
                            min: -20.7,
                            max: 11.4,
                            callback: function(value, index, values) {
                                return Math.abs(value);
                            }
                        },
                        gridLines :{
                          display: true,
                          color: 'rgba(0, 0, 0, 0.2)',
                          lineWidth: 2,
                          drawOnChartArea: true,
                          zeroLineWidth: 2,
                          zeroLineColor: 'rgba(0, 0, 0, 0.7)'
                        }
                    }],
                yAxes: [
                    {
                        stacked: true
                    }]
            },
            tooltips: {
                enabled: false
            },
            legend: {
                display: false
            }
        }
    });```

I'm looking for a solution to show the 0 tick but remove the ticks close to the minimum and maximum ticks as they are too close and the text is scribbled when putting the chart in smaller areas.

chartjs堆叠水平条形图autoSkipPadding删除0勾号

0 个答案: