Chart.Js - 仅显示特定（固定）X 轴标签

Question

注意：即使某些“区域”没有值，也应该显示标签0、0.1、0.2、0.3、0.4和0.5。我尝试了我的不同选项，我发现的“最佳”是控制要显示的标签数量，但它不是我想要的：

config = {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                data: [],
                borderWidth: 2,
                borderColor:'#E16972',
                fill: false
            }]
        },
        options: {
            responsive: true,
            tooltips: {
                enabled: false
            },
            title: {
                display: false
            },
            legend: {
                display: false
            },
            elements: {
                point:{
                    radius: 0
                }
            },
            scales: {
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'psd'
                    },
                    /*ticks: {
                         max: 2,
                         min: 0,
                        stepSize: 0.2
                    },*/
                    ticks: {
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: false,
                        labelString: 'frequency'
                    },
                    ticks: {
                        callback: function(dataLabel, index) {
                            // Hide the label of every 2nd dataset. return null to hide the grid line too
                            return index % 2 === 0 ? dataLabel : '';
                        }
                    }
                }]
            }
        }
      }

Answer 1

不幸的是，您的示例代码没有显示任何数据，因此我不得不假设它可能是什么样子。

在垂直条形图中，各个条形均匀分布在x轴上的可用空间中。因此，x轴的值(标签)与您的情况无关，它们的数量只需与数据值的数量相匹配。

然而，数据值的数量很重要，它必须符合线性标度。因此，在下面的runnable代码片段中，我提供了15个值(其中一些为零)，最终每个宽度为0.1的部分有3个值。

const data = [0, 0.0003, 0.0008, 0.00025, 0.0012, 0.0018, 0, 0.00078, 0.00034, 0, 0, 0, 0, 0, 0];

var canvas = document.getElementById('myChart');
new Chart(canvas, {
    type: 'bar',
    data: {
        labels: data.map(v => 'x'),
        datasets: [{
            data: data,
            borderWidth: 2,
            borderColor: '#E16972',
            fill: false
        }]
    },
    options: {
        responsive: true,
        tooltips: {
            enabled: false
        },
        title: {
            display: false
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'psd'
                },
                ticks: {
                    beginAtZero: true,
                    stepSize: 0.001
                }
            }],
            xAxes: [{
                    display: false
                },
                {
                    scaleLabel: {
                        display: true,
                        labelString: 'frequency'
                    },
                    type: 'linear',
                    ticks: {
                        max: 0.5,
                        stepSize: 0.1
                    }
                }
            ]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>