Question

我需要创建一个Chart.js，默认情况下，它仅在X轴上显示标签0、0.1、0.2、0.3、0.4和0.5。如果需要绘制值0.013，则该值应在0到0.1之间，但不显示其特定标签。值0.389相同，需要在0.3到0.4之间显示，且具有相同的行为。目前，我的图形显示如下：

所需的是这样的：

注意：即使某些“区域”没有值，也应显示标签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轴（标签）的值无关紧要，它们的数字只需要与数据值的数量匹配即可。

但是，数据值的数量很重要，它必须适合线性刻度。因此，在下面的可运行代码段中，我提供了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>

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

1 个答案: