javascript - 气泡图动态更改 JSON 响应中的 X 标签值

Question

我有一个使用 Chart.JS 的气泡图，并从数据库动态获取我的值。数据的绘制工作得非常好，但是我正在尝试对图表进行一些格式调整。

我想更改 X 值以在水平轴上显示类别(它在我的 JSON 输出中)而不是 i 值。 JSON 输出包含类别，它是一个字符串，但我似乎无法执行 x: bubbleDatas[i].category?

输出当前显示在我的 x 轴上:0,1,2,3,4,5，但我希望它显示 bubbleDatas 中的 JSON 响应中的值类别？

数据例如: { x:0， y:60， 右:10 }, { x:1， y:20， 右:10 }, { x:2， y:40， 右:10 }...

在我的 JSON 响应 ajax 请求我的 X 值中，我希望它是文本: 例如01_第一，02_第二

   $(function () {

    var bubbleData = [];
    var xAxisLabels;
    $.ajax({
        type: "POST",
        async: false,
        url: "ExecView.aspx/ReturnData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var bubbleDatas = data.d;
           bubbleData = new Array(bubbleDatas.length);
            console.log(bubbleDatas);

            for (i = 0; i < bubbleDatas.length; i++) {

                if (bubbleDatas[i].score >= 60) {
                    rgbcolour = "#008000";
                }
                else if (bubbleDatas[i].score >= 50 && bubbleDatas[i].score < 60) {
                    rgbcolour = "#FFA500";
                }
                else {
                    rgbcolour = "#FF6347";
                }

                bubbleData[i] = { **x: i,** y: bubbleDatas[i].score, r: bubbleDatas[i].radius, backgroundcolor: rgbcolour };

                console.log(bubbleData[i]);

            }



        }
    });



    var popData = {
        datasets: [{
            label: "Test",
            data: bubbleData
        }]
    };

    var bubbleOptions = {
        responsive: true,
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function (t, d) {
                        return d.datasets[t.datasetIndex].label +
                            ': (Category:' + t.xLabel + ', Score:' + t.yLabel + ')';
                    }
                }
        },
        scales: {
            yAxes: [{
                ticks: {
                    // Include a % sign in the ticks
                    callback: function (value, index, values) {
                        return value + '%';
                    }
                }
            }]
        }




    };

    var ctx5 = document.getElementById("bubble_chart").getContext("2d");
    new Chart(ctx5, { type: 'bubble', data: popData, options: bubbleOptions });
});

Answer 1

将类别更改为更有意义可能是您的具体要求，请检查此 fiddle 是否有帮助bubble chartJS fiddle并检查这个 labelling in chartJS

附注检查回调中 x-axis 的条件并相应打印