jquery 如何在Chart.js折线图中为当前日期标签创建假数据点?

k10s72fa  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(84)

在尝试使用spanGaps: true选项在Chart.js折线图上创建一个假数据点时,我使用了null值。但是,我一直无法实现current date "2023-03-26"数据标签的假点。
为了提供更多的上下文和故障排除的帮助,我附上了我的数据和有问题的图表的截图。
我将感谢任何关于如何成功地为我的Chart.js折线图中的current date "2023-03-26"数据标签创建假数据点的见解或建议。

greenline=[
    "0.00",
    NaN,
    "100.00",
    NaN,
    NaN,
    NaN,
    NaN,
    NaN,
    NaN,
];

blueline=[
    0,
    NaN,
    NaN,
    NaN,
    NaN,
    NaN,
    null,
    NaN,
    100
];

datelabel= [
    "2023-03-19",
    "",
    "2023-03-20",
    "",
    "",
    "",
    "2023-03-26",
    "",
    "2023-05-08"
];

0kjbasz6

0kjbasz61#

要绘制标签“2023-03-26”的blueline值,首先需要在datelab数组中找到“2023-03-26”的索引,然后使用该索引在blueline数组中找到相应的值。

const targetDate = "2023-03-26";
const index = datelabel.indexOf(targetDate);

要计算缺失日期的值,可以在两个最近的已知值之间进行插值。在这种情况下,由于blueline数组中只有第一个和最后一个值,因此可以根据目标日期的索引在这两个值之间执行线性插值。
以下是您可以做到的方法:

const firstKnownIndex = blueline.findIndex(value => !isNaN(value) && value !== null);
const lastKnownIndex = blueline.lastIndexOf(blueline.find(value => !isNaN(value) && value !== null));

const firstKnownValue = blueline[firstKnownIndex];
const lastKnownValue = blueline[lastKnownIndex];

const index = datelabel.indexOf(targetDate);

if (index !== -1 && firstKnownIndex !== -1 && lastKnownIndex !== -1) {
    const interpolatedValue = firstKnownValue + ((index - firstKnownIndex) * (lastKnownValue - firstKnownValue)) / (lastKnownIndex - firstKnownIndex);
    console.log(`The interpolated value of blueline for the date ${targetDate} is:`, interpolatedValue);
} else {
    console.log(`The date ${targetDate} was not found in the datelabel array, or there are no known values to interpolate between.`);
}

然后将该值添加到相应索引中的蓝线,您将在折线图中看到所需的点。

相关问题