Javascript 如何在Charts.js的工具箱中显示图例?

Javascript 如何在Charts.js的工具箱中显示图例?,javascript,python,django,charts,chart.js,Javascript,Python,Django,Charts,Chart.js,我在Django项目中使用charts.js创建了散点图。它工作得很清楚,但在工具箱中,图例名称并没有显示,只是显示了数字。如何显示它 我想显示为:阿根廷(44015314.68,28) 我的代码: var bubbleChart = document.getElementById('mybubbleChart').getContext('2d') var myBubbleChart = new Chart(bubbleChart,{ type: 's

我在Django项目中使用charts.js创建了散点图。它工作得很清楚,但在工具箱中,图例名称并没有显示,只是显示了数字。如何显示它

我想显示为:阿根廷(44015314.68,28)

我的代码:

var bubbleChart = document.getElementById('mybubbleChart').getContext('2d')

        var myBubbleChart = new Chart(bubbleChart,{
            type: 'scatter',
            data: {
                datasets:[{
                    label: name_1,
                    data:[{x:x_1,y:y_1}],
                    backgroundColor:"#716aca"
                },{
                    label: name_2,
                    data:[{x:x_2,y:y_2}],
                    backgroundColor:"#d643ad"
                },{
                    label: name_3,
                    data:[{x:x_3,y:y_3}],
                    backgroundColor:"#2ec3be"
                },{
                    label: name_4,
                    data:[{x:x_4,y:y_4}],
                    backgroundColor:"#2ec34e"
                }, {
                    label: name_5,
                    data:[{x:x_5,y:y_5}],
                    backgroundColor:"#decb3e"
                },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                },
                tooltip: { isHtml: false },
                elements: {
                    point: {
                        radius: 10,
                        hoverRadius: 15,
                        }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },

                    }],
                    xAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                    }]
                },
            }
        });

您可以通过使用自定义回调来更改工具提示的文本,如下所示:

  options: {
    tooltips: {
        callbacks: {
        label: (tooltipItem, data) => (`${data.datasets[tooltipItem.datasetIndex].label}(${tooltipItem.xLabel},${tooltipItem.yLabel})`)
      }
    }
  }
工作示例:

var选项={
键入:“散布”,
数据:{
数据集:[{
标签:“#投票数”,
数据:[{
x:5,
y:4
}, {
x:2,
y:7
}, {
x:3,
y:3
}, {
x:3.5,
y:5.5
}],
背景颜色:“红色”
}]
},
选项:{
工具提示:{
回调:{
label:(tooltipItem,data)=>(`${data.datasets[tooltipItem.datasetIndex].label}(${tooltipItem.xLabel},${tooltipItem.yLabel})`)
}
}
}
}
var ctx=document.getElementById('chartJSContainer').getContext('2d');
新图表(ctx,选项)


那不是谷歌图表,是查特。哦,对不起,我修好了。。。