javascript - 在 Chart Js 图上标记 X 值

Question

我有这张图表:

我想为用户标记一个给定的 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,
        }
    }

});

Answer 1

这里是 annotation plugin 的正确用法:

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

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

var data = [{
            x: 0,
            y: 5
         }, {
            x: 1,
            y: 6
         }, {
            x: 2,
            y: 8
         }, {
            x: 3,
            y: 9
         }];

var chart = new Chart(document.getElementById("ctx"), {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Benign_Cross_Entropy",
            data: data,
            borderWidth: 2,
            showLine: true,
            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,
        },
        scales: {
          xAxes: [{
            type: 'linear',
            id: 'x-axis-0',
          }]
        }
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>

<canvas id="ctx"></canvas>

这也是一个 jsfiddle:https://jsfiddle.net/beaver71/e3b1Ldms/