Question

我使用chart.js创建了一个气泡图，其外观如下

有没有办法为图表中的每个气泡命名？我打算在此图表下方放置一个数据框。单击每个气泡数据框时，应显示与每个气泡相关的信息。每个气泡都有自己的数据，如maturity_date，bond_type，credit_rating，symbol等......我如何命名每个气泡？这些气泡是动态创建的。这是我用来创建图表的代码

    $(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" }
        }
    }
}

Chart.js：有没有办法在图表中命名每个气泡？

1 个答案: