Javascript 如何在Charts.js的工具箱中显示图例?
我在Django项目中使用charts.js创建了散点图。它工作得很清楚,但在工具箱中,图例名称并没有显示,只是显示了数字。如何显示它 我想显示为:阿根廷(44015314.68,28) 我的代码: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
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,选项)代码>
那不是谷歌图表,是查特。哦,对不起,我修好了。。。