Chart.js -图表上的行数据与其日期不匹配

您在下面看到的图表中的白色的数据和日期如下所示。正如您在这里看到的，例如，3月9日-3月10日-3月11日和3月12日没有数据。但是由于白线位于左侧，当我将图表悬停时，似乎有3月10日的数据作为示例。如何匹配数据和日期？
日期：[“Apr 02 2023，12：04”，“Apr 01 2023，12：04”，“Mar 31 2023，12：03”，“Mar 30 2023，12：03”，“Mar 29 2023，12：03”，“Mar 27 2023，12：03”，“Mar 26 2023，12：03”，“Mar 24 2023，12：03”，“Mar 13 2023，12：03”，“Mar 08 2023，12：03”，“Mar 06 2023，12：03”，“Mar 05 2023，12：03”]
值：[“0.0177”，“0.41”，“0.301”，“0.1”，“0.016”，“0.0171”，“0.0176”，“0.0175”，“0.0169”，“0.0101”，“0.0179”，“0.09”]

我寻找解决这个问题，但我找不到任何解决方案

你可能想调整交互选项，请看文档。要达到我认为你想要的行为，你必须设置：

options.interaction.axis到'x'
options.interaction.intersect为false
并保留options.interaction.mode：'nearest'（默认）

下面是一个小片段，每个数据集中有一个数据点“丢失”：

const chartData = [{
    label: "Avg. Price",
    type: "line",
    borderColor:'#fff',
    backgroundColor:'#fff',
    data: [
        {
            date: new Date("3/08/2023").valueOf(),
            value: 21.2,
        },
        {
            date: new Date("3/09/2023").valueOf(),
            value: 23.2,
        },
        {
            date: new Date("3/11/2023").valueOf(),
            value: 13.5,
        },
        {
            date: new Date("3/12/2023").valueOf(),
            value: 15,
        }
    ]
},
{
    label: "Floor Price",
    type: "line",
    borderColor:'#a4d',
    backgroundColor:'#a4d',
    data: [
        {
            date: new Date("3/08/2023").valueOf(),
            value: 11.2,
        },
        {
            date: new Date("3/10/2023").valueOf(),
            value: 12.1,
        },
        {
            date: new Date("3/11/2023").valueOf(),
            value: 23,
        },
        {
            date: new Date("3/12/2023").valueOf(),
            value: 21,
        }
    ]
},
{
    label: "Volume",
    type: "bar",
    backgroundColor: '#00d',
    data: [
        {
            date: new Date("3/08/2023").valueOf(),
            value: 14,
        },
        {
            date: new Date("3/09/2023").valueOf(),
            value: 19,
        },
        {
            date: new Date("3/10/2023").valueOf(),
            value: 17,
        },
        {
            date: new Date("3/11/2023").valueOf(),
            value: 15,
        }
    ]
}];

new Chart(document.getElementById("chart"), {
    data: {
        datasets: chartData
    },
    options: {
        responsive: true,
        parsing: {
            xAxisKey: "date",
            yAxisKey: "value",
        },
        interaction: {
            intersect: false,
            axis: 'x',
            //mode: 'nearest',
        },

        scales: {
            x: {
                type: "time",
                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'MM/dd/yyyy'
                    }
                }
            }
        }
    }
});

<div style="height:120vh">
<canvas id="chart" style="background-color: #000"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js" integrity="sha512-vCUbejtS+HcWYtDHRF2T5B0BKwVG/CLeuew5uT2AiX4SJ2Wff52+kfgONvtdATqkqQMC9Ye5K+Td0OTaz+P7cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>

Chart.js -图表上的行数据与其日期不匹配

1条答案

相关问题

热门标签

最新问答