ChartJS - 在散点图上显示数据值

如何解决ChartJS - 在散点图上显示数据值

我正在使用 scatter chart 的 ChatJS，如下所示：

我正在尝试添加要在图形内显示的数据值（例如上面的线，中间点应显示标签 ~0.05）

我尝试关注 this thread，但我认为散点图的作用与折线图/条形图不同，因此它对我不起作用。

我的代码：

function createStatisticalResultsChart(kpiData) {
    var kpiName = kpiData.kpi_name;
    var kpiChartId = `${kpiName}-chart`;

    if (kpiData.x_axes_dict.g2_values) {
        var scatterChartDatasets = generateScatterChartDatasets(kpiData,num_test_groups);
        new Chart(document.getElementById(kpiChartId),{
            type: 'scatter',data: {
                datasets: scatterChartDatasets
            },options: {
                legend: false,tooltips: false,scales: {
                    y: {
                        display: false,suggestedMin: -2,suggestedMax: 2,},x: {
                        suggestedMin: -1,suggestedMax: 1,ticks: {
                            // Include a dollar sign in the ticks
                            callback: function(value,index,values) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        })
    } else {
        // If not xAxisList - it means the upper & lower bound returned NULL results from memdsql
        var canvasObject = document.getElementById(kpiChartId);
        var ctx = canvasObject.getContext("2d");
        ctx.font = "12px Verdana";
        ctx.fillText("Lower & Upper bounds data is N/A",10,90);
    }

};



function generateScatterChartDatasets(kpiData,num_test_groups) {
    var xAxisValuesG2 = kpiData.x_axes_dict.g2_values;
    // Y value of 0 (straight line)
    var finalXAxisG2Array = generateScatterChartData(xAxisValuesG2,1);
    var groupB_Dataset = {
        label: 'Group-B',data: finalXAxisG2Array,borderColor: `${significance_colors_dict[kpiData.uplift_g2_significant_level]}`,backgroundColor: 'white',showLine: true,pointStyle: 'cross',poinTradius: 10,};

    var finalDatasets = [];
    finalDatasets.push(groupB_Dataset);


    if (num_test_groups > 2) {
        var xAxisValuesG3 = kpiData.x_axes_dict.g3_values;
        // Y value of 0 (straight line)
        var finalXAxisG3Array = generateScatterChartData(xAxisValuesG3,0);
        var groupC_Dataset = {
            label: 'Group-C',data: finalXAxisG3Array,borderColor: `${significance_colors_dict[kpiData.uplift_g3_significant_level]}`,borderDash: [10,5],};
        finalDatasets.push(groupC_Dataset);
    }
    return finalDatasets;
}

function generateScatterChartData(xAxisValues,yValue) {
    // finalArray will match the scatter-chart required data
    // yValue should be always a INT CONSTANT (0/1/2)
    var finalArray = [];
    for (var i = 0; i < xAxisValues.length; i++) {
        finalArray.push({
            'x': xAxisValues[i] * 100,'y': yValue
        })
    }

    return finalArray;

}



// MAIN
createStatisticalResultsChart(kpiDataFromDatabase);