我在向气泡图上的点添加标签时遇到困难。
我正在尝试为每个数据集分配与图例相同的标签。
我尝试为这些点分配一个标签，但我似乎只能显示它的值。
我想显示上面点的值和该点下面的自定义标签(如下面的第二张图片所示)。
这是我迄今为止在图表上取得的进展的代码。
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [
{
label: 'Top',
data: [
{x: 110, y: 0, r: 10, name: "Performance"}
],
backgroundColor: "rgba(153,255,51,0.6)"
},
{
label: 'Average',
data: [
{x: 75, y: 0, r: 10, name: "Performance"}
],
backgroundColor: "rgba(153,255,51,0.6)"
},
{
label: 'You 2017',
data: [
{x: 55, y: 0, r: 10, name: "Performance"}
],
backgroundColor: "rgba(153,255,51,0.6)"
},
{
label: 'You 2018',
data: [
{x: 90, y: 0, r: 10, name: "Performance"} // The labe needs to be
],
backgroundColor: "rgba(255,0,128,0.6)"
}
]
},
pointDot : true,
options: {
plugins: {
datalabels: {
anchor: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
align: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
color: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? context.dataset.backgroundColor : 'white';
},
font: {
weight: 'bold'
},
formatter: function (value) {
return Math.round(value.x);
},
offset: 2,
padding: 0
}
},
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'first-y-axis',
type: 'linear',
ticks: {
min: 0,
max: 1,
stepSize: 1,
display: false
},
gridLines: {
display: false,
drawBorder: false
}
}],
xAxes: [
{
id: 'first-x-axis',
ticks: {
min: 50, // Controls where axis starts
max: 120, // Controls where axis finishes
stepSize: 70 // Control the gap between the first x-axis value and the last x-axis value
},
gridLines: {
display: false,
lineWidth: 3 // Width of bottom line
}
}
]
}
}
});
</script>
感谢任何帮助或建议^_^
最佳答案
以这种方式修改您的数据标签插件配置:
datalabels: {
anchor: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
align: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? 'end' : 'center';
},
color: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.x < 1000 ? context.dataset.backgroundColor : 'white';
},
font: {
weight: 'bold'
},
formatter: function (value, context) {
return context.dataset.label;
},
offset: 2,
padding: 0
}
formatter还有一个 context 参数，其中包含有关数据集(如标签)的信息。
这是一个 fiddle :https://jsfiddle.net/beaver71/3ed8t6pe/
关于javascript - 将标签添加到气泡图的点 (Chart.js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48624677/