Chart.js x轴时间在使用组合（混合）图表时不显示值

Question

[将x轴设置为'时间'并使用混合图表数据时，某些图表数据将不会显示。

我正在使用：[email protected]@2.24.0

我已经尝试了一些不同的选项（（堆叠/未堆叠，stepSize，分布），但始终未显示某些数据点。

function newDate(days) {
    return moment().add(days, 'd');
}

const data1 = [
    {
        x: newDate(-2),
        y: 10
    },
    {
        x: newDate(-1),
        y: 1
    },
    {
        x: newDate(0),
        y: 10
    }
];

const data2 = [
    {
        x: newDate(-3),
        y: 50
    },
    {
        x: newDate(-2),
        y: 50
    },
    {
        x: newDate(-1),
        y: 75
    },
    {
        x: newDate(0),
        y: 100
    }
];

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [
            {
                type: 'line',
                data: data1,
                fill: false,
                yAxisID: 'right-y-axis',
                label: 'Line',
                backgroundColor: '#000',
                borderColor: '#ccc',
                borderWidth: 3,
            },
            {
                type: 'bar',
                data: data2,
                fill: false,
                yAxisID: 'left-y-axis',
                label: 'Bar',
                backgroundColor: '#aaa',
                borderColor: '#000',
                borderWidth: 1,
            }
        ]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear',
                time: {
                    tooltipFormat: 'MMM D',
                    unit: 'day',
                    stepSize: 1,
                },
                barPercentage: 0.5,
                display: true,
                stacked:true,
            }],
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '#'
                },
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right',
                display: true,
                stacked: false,
                scaleLabel: {
                    display: true,
                    labelString: '$'
                }
            }],
        }
    }
});

这是生成的实际图表的图像：https://imgur.com/a/zFsOcsK

我原本打算渲染4个小节。

我目前不知道出什么问题了，也没有错误消息。

错误提示：https://jsfiddle.net/bundsgaard/tzeg6pwh/

Answer 1

因此，误差是从数据集中最低的数据点开始的y轴。尽管可以悬停，但这会使该条不可见。

通过设置：

ticks: {
    beginAtZero: true
}

在yAxis范围内，我可以克服这一点。也可以在数据点所附加的yAxis上设置minBarLength（以避免不显示0值）