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

Question

我正在使用 ChatJS 的散点图，如下所示：

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

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

我的代码：

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]}`,
            backgroundColor: 'white',
            showLine: true,
            borderDash: [10, 5],
            pointStyle: 'cross',
            pointRadius: 10,
        };
        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);

标签： javascriptgraphchart.jslabelscatter