javascript - Chart.js : Is there a way to name each bubble in chart?

Question

我使用chart.js创建了一个气泡图，如下所示

有没有办法命名图表中的每个气泡？我计划在此图表下方放置一个数据框。单击每个气泡时，数据框应显示与每个气泡相关的信息。每个泡沫都有自己的数据，如成熟日期、债券类型、信用评级、符号等...我如何命名每个泡沫？这些气泡是动态创建的。这是我用来创建图表的代码

    $(document).ready(function(){
            $.ajax({url: "xxxxxxxx.x.xx", success: function(result){
                var dataObj = {};
                dataObj.datasets = [];
                var object = {};
                object.label = 'First Dataset';
                object.backgroundColor = [];
                object.hoverBackgroundColor = [];
                object.data = [];
                var resultData = result.data;
                var currentYear = new Date().getFullYear();
                for (var i=0; i<resultData.length; i++) {
                    if(resultData[i].hasOwnProperty("maturity_date") && resultData[i].hasOwnProperty("ask_ytm")) {
                        var maturity_date = resultData[i].maturity_date.split("-");
                        var matYear = new Date(maturity_date[1]+"-"+maturity_date[0]+"-"+maturity_date[2]).getFullYear();
                        if (resultData[i].bond_type == "Tax Free" )
                        {
                        object.backgroundColor.push("#34A10C");
                        object.hoverBackgroundColor.push("#34A10C");
                        }
                        else
                        {
                        object.backgroundColor.push("#1130E8");
                        object.hoverBackgroundColor.push("#1130E8");
                        }
                    object.data.push({x: (matYear - currentYear), y: resultData[i].ask_ytm, r: 4});
                    }
                }
                dataObj.datasets.push(object);
                var ctx = document.getElementById("myChart");
                var myBubbleChart = new Chart(ctx,{
                    type: 'bubble',
                    data : dataObj,
            legend: {
            display: false
                    },
            responsive: true,
            maintainAspectRatio: true,
                  }
                });

            }});

    });

Answer 1

在数据声明中，如果需要，您可以添加自定义属性:

data: [{
    x: 20,
    y: 30,
    r: 15,
    symbol: "£",
    bond_type: "corporate"
}, {
    x: 40,
    y: 10,
    r: 10,
    symbol: "$",
    bond_type: "james"
} /* ... */]

由于此数据是动态的，因此您当然需要从后端执行此操作。

<小时/> 之后，您可以在回调中访问这些新属性(例如 onClick 事件):

options: {
    onClick: function(e) {
        var element = this.getElementAtEvent(e);

        if (element.length > 0) {

            var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];

            console.log(data);
            // You can have the following for instance :
            // data -> { x:40, y:10, r:10, symbol:"$", bond_type:"james" }
        }
    }
}