我正在使用chartjs创建一个气泡图。我可以创建描述每个气泡的工具提示,但我的图表的用户可能无法将鼠标悬停在气泡上以查看工具提示。BubbleData对象格式不包括label元素(我还是放了一个进去--运气不好),我已经尝试了图表数据对象的“labels”元素(尽管文档中说这是用于Category标签的--你永远不知道!),以及我能想到的将标签放在气泡上的所有方法。是否有一个工具提示配置,使所有的工具提示在任何时候都是可见的?这对我来说也是有效的。谢了;格伦
l7mqbcuq1#
我也在寻找同样的东西,并想出了如何做到这一点。1.在数据集中添加要显示的标题“dataTitle3”。1.请使用data labeling plugin。1.使用dataset.title,简单的代码操作可以实现您想要的效果我已经做了一个示例,但我认为您可以找到如何表示您想要的数据,如果您玩:external link第一个
dataset.title
mum43rcc2#
ChartJs现在有一个插件。https://github.com/chartjs/chartjs-plugin-datalabels只需使用nuget或bower安装它,并添加它的引用。它会自动设置z为标签
5cg8jx4n3#
sytax在chart.js V3中有一些地方发生了变化,所以我想分享一下我对所选答案的变化。
Chart.register({ id: 'permanentLabel', afterDatasetsDraw: function (chart, args, options) { var ctx = chart.ctx chart.data.datasets.forEach(function (dataset, i) { var meta = chart.getDatasetMeta(i) if (meta.type == 'bubble') { meta.data.forEach(function (element, index) { ctx.textAlign = 'center' ctx.textBaseline = 'middle' var position = element.tooltipPosition() ctx.fillText(dataset.data[index].label.toString(), position.x, position.y - dataset.data[index].r - Chart.defaults.font.size) }) } }) }, })
Chart.register({
id: 'permanentLabel',
afterDatasetsDraw: function (chart, args, options) {
var ctx = chart.ctx
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i)
if (meta.type == 'bubble') {
meta.data.forEach(function (element, index) {
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
var position = element.tooltipPosition()
ctx.fillText(dataset.data[index].label.toString(), position.x, position.y - dataset.data[index].r - Chart.defaults.font.size)
})
}
},
bqjvbblv4#
I有一些额外的代码,以避免标签重叠。
var labelPlugin = { myTimeout: null, getNewYPostion:function(item, alreadyUsed, fontSize){ for(let i of alreadyUsed){ if((item.y_from >= i.y_from && item.y_from <= i.y_to) || (item.y_to>= i.y_from && item.y_to <= i.y_to)){ if((item.x_from >= i.x_from && item.x_from <= i.x_to) || (item.x_to>= i.x_from && item.x_to <= i.x_to)){ item.y_from=i.y_to+(fontSize*0.1); item.y_to=item.y_from+fontSize; return this.getNewYPostion(item, alreadyUsed, fontSize); } } } return item; }, afterDatasetsDraw: function (chart, args, options) { var ctx = chart.ctx; var that=this; clearTimeout(this.myTimeout); this.myTimeout = setTimeout(function () { var alreadyUsed = []; chart.data.datasets.forEach(function (dataset, i) { var txt = dataset.label; var txtSize = ctx.measureText(txt).width; var meta = chart.getDatasetMeta(i); if (meta.type === "bubble") { //exclude scatter var fontSize = 10; var fontStyle = 'normal'; var fontFamily = 'Helvetica Neue'; ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; var padding, position, x_from, x_to, y, y_from, y_to; meta.data.forEach(function (element, index) { padding = element.options.radius; position = element.tooltipPosition(); x_from = position.x + padding + 5; // left x_to = x_from + txtSize; // left y = position.y; // top y_from = y - (fontSize * 0.5); y_to = y + (fontSize * 0.5); var item={ 'y_from': y_from, 'y_to': y_to, 'x_from': x_from, 'x_to': x_to, }; item=that.getNewYPostion(item, alreadyUsed, fontSize); alreadyUsed.push(item); ctx.fillText(txt, item.x_from, item.y_from+(0.5*fontSize)); }); } }); }, 500); } };
var labelPlugin = {
myTimeout: null,
getNewYPostion:function(item, alreadyUsed, fontSize){
for(let i of alreadyUsed){
if((item.y_from >= i.y_from && item.y_from <= i.y_to) || (item.y_to>= i.y_from && item.y_to <= i.y_to)){
if((item.x_from >= i.x_from && item.x_from <= i.x_to) || (item.x_to>= i.x_from && item.x_to <= i.x_to)){
item.y_from=i.y_to+(fontSize*0.1);
item.y_to=item.y_from+fontSize;
return this.getNewYPostion(item, alreadyUsed, fontSize);
return item;
var ctx = chart.ctx;
var that=this;
clearTimeout(this.myTimeout);
this.myTimeout = setTimeout(function () {
var alreadyUsed = [];
var txt = dataset.label;
var txtSize = ctx.measureText(txt).width;
var meta = chart.getDatasetMeta(i);
if (meta.type === "bubble") { //exclude scatter
var fontSize = 10;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
var padding, position, x_from, x_to, y, y_from, y_to;
padding = element.options.radius;
position = element.tooltipPosition();
x_from = position.x + padding + 5; // left
x_to = x_from + txtSize; // left
y = position.y; // top
y_from = y - (fontSize * 0.5);
y_to = y + (fontSize * 0.5);
var item={
'y_from': y_from,
'y_to': y_to,
'x_from': x_from,
'x_to': x_to,
};
item=that.getNewYPostion(item, alreadyUsed, fontSize);
alreadyUsed.push(item);
ctx.fillText(txt, item.x_from, item.y_from+(0.5*fontSize));
});
}, 500);
yr9zkbsy5#
在2022年的当前版本是3.9.1这里是一个工作片段:第一个
3.9.1
5条答案
按热度按时间l7mqbcuq1#
我也在寻找同样的东西,并想出了如何做到这一点。
1.在数据集中添加要显示的标题“dataTitle3”。
1.请使用data labeling plugin。
1.使用
dataset.title
,简单的代码操作可以实现您想要的效果我已经做了一个示例,但我认为您可以找到如何表示您想要的数据,如果您玩:external link
第一个
mum43rcc2#
ChartJs现在有一个插件。
https://github.com/chartjs/chartjs-plugin-datalabels
只需使用nuget或bower安装它,并添加它的引用。它会自动设置z为标签
5cg8jx4n3#
sytax在chart.js V3中有一些地方发生了变化,所以我想分享一下我对所选答案的变化。
bqjvbblv4#
I有一些额外的代码,以避免标签重叠。
yr9zkbsy5#
在2022年的当前版本是
3.9.1
这里是一个工作片段:第一个