Javascript 在图表Js图形上标记X值

我有这个图表：

我想为用户标记一个给定的X值。例如，我想要这样的东西：

图表代码：

var chart = new Chart(document.getElementById("featureChart"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Benign_Cross_Entropy",
            data: customize_date
        }]
    },
    options: {
        responsive: true
    }

});

我怎么做？谢谢

编辑：我正在尝试使用注释，但我不确定出了什么问题。 海狸在评论中给出的例子看起来不错

    var ann = [1];
var ann_values = ["your data"];

var annotations_array = ann.map(function(date, index) {
    return {
        type: 'line',
        id: 'vline' + index,
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: date,
        borderColor: 'green',
        borderWidth: 1,
        label: {
            enabled: true,
            position: "center",
            content: ann_values[index]
        }
    }
});

var chart = new Chart(document.getElementById("featureChart"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Benign_Cross_Entropy",
            data: customize_date,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderJoinStyle: 'miter'
            // pointBorderColor: "rgba(75,192,192,1)",
            // pointBackgroundColor: "#fff"
        }
        ]
    },
    options: {
        responsive: true,
        elements: { point: { radius: 0 } },
        annotation: {
            drawTime: 'afterDatasetsDraw',
            annotations: annotations_array,
        }
    }

});

---

以下是以下各项的正确用法：

var-ann=[1]；
var ann_labels=[“您的数据”]；
var注释\u数组=ann.map（函数（值、索引）{
返回{
键入：“行”，
id:'vline'+索引，
模式：“垂直”，
scaleID:'x轴-0'，
价值：价值，
边框颜色：“红色”，
边界宽度：2，
标签：{
启用：对，
位置：“中心”，
内容：安丘标签[索引]
}
}
});
console.log（注释\u数组）
风险值数据=[{
x:0,，
y:5
}, {
x:1，
y:6
}, {
x:2，
y:8
}, {
x:3，
y:9
}];
var图表=新图表（document.getElementById（“ctx”）{
键入：“散布”，
数据：{
数据集：[{
标签：“良性交叉熵”，
数据：数据，
边界宽度：2，
秀行：没错，
背景颜色：“rgba（75192192,0.4）”，
边框颜色：“rgba（75192192,1）”，
//borderCapStyle:“butt”，
//borderJoinStyle:“斜接”
//pointBorderColor:“rgba（75192192,1）”，
//pointBackgroundColor:“fff”
}]
},
选项：{
回答：是的，
//元素：{点：{半径：0}}，
注释：{
drawTime:“afterDatasetsDraw”，
注释：注释数组，
},
比例：{
xAxes：[{
类型：'线性'，
id:'x轴-0'，
}]
}
}
});

您是否考虑过合并两种不同的图形类型？也就是说，在您提供的示例中放置“x”的地方，可以有一个单条。。。您是否确切地知道您希望它的外观/感觉如何？这可能是一个合适的想法，我不确定如何实现它。“标记”的目的是与所有数据相比显示1点。它应该有“comparision”样式在这里检查我的答案：@beaver谢谢它看起来不错，但它对我不起作用，如果你可以检查的话，我在编辑中添加了代码