chartjs气泡图中的单个气泡是否可以有标签?

hfsqlsce  于 2022-11-06  发布在  Chart.js
关注(0)|答案(5)|浏览(223)

我正在使用chartjs创建一个气泡图。我可以创建描述每个气泡的工具提示,但我的图表的用户可能无法将鼠标悬停在气泡上以查看工具提示。BubbleData对象格式不包括label元素(我还是放了一个进去--运气不好),我已经尝试了图表数据对象的“labels”元素(尽管文档中说这是用于Category标签的--你永远不知道!),以及我能想到的将标签放在气泡上的所有方法。
是否有一个工具提示配置,使所有的工具提示在任何时候都是可见的?这对我来说也是有效的。
谢了;
格伦

l7mqbcuq

l7mqbcuq1#

我也在寻找同样的东西,并想出了如何做到这一点。
1.在数据集中添加要显示的标题“dataTitle3”。
1.请使用data labeling plugin
1.使用dataset.title,简单的代码操作可以实现您想要的效果
我已经做了一个示例,但我认为您可以找到如何表示您想要的数据,如果您玩:external link
第一个

mum43rcc

mum43rcc2#

ChartJs现在有一个插件。
https://github.com/chartjs/chartjs-plugin-datalabels
只需使用nuget或bower安装它,并添加它的引用。它会自动设置z为标签

5cg8jx4n

5cg8jx4n3#

sytax在chart.js V3中有一些地方发生了变化,所以我想分享一下我对所选答案的变化。

  1. Chart.register({
  2. id: 'permanentLabel',
  3. afterDatasetsDraw: function (chart, args, options) {
  4. var ctx = chart.ctx
  5. chart.data.datasets.forEach(function (dataset, i) {
  6. var meta = chart.getDatasetMeta(i)
  7. if (meta.type == 'bubble') {
  8. meta.data.forEach(function (element, index) {
  9. ctx.textAlign = 'center'
  10. ctx.textBaseline = 'middle'
  11. var position = element.tooltipPosition()
  12. ctx.fillText(dataset.data[index].label.toString(), position.x, position.y - dataset.data[index].r - Chart.defaults.font.size)
  13. })
  14. }
  15. })
  16. },
  17. })

展开查看全部
bqjvbblv

bqjvbblv4#


I有一些额外的代码,以避免标签重叠。

  1. var labelPlugin = {
  2. myTimeout: null,
  3. getNewYPostion:function(item, alreadyUsed, fontSize){
  4. for(let i of alreadyUsed){
  5. 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)){
  6. 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)){
  7. item.y_from=i.y_to+(fontSize*0.1);
  8. item.y_to=item.y_from+fontSize;
  9. return this.getNewYPostion(item, alreadyUsed, fontSize);
  10. }
  11. }
  12. }
  13. return item;
  14. },
  15. afterDatasetsDraw: function (chart, args, options) {
  16. var ctx = chart.ctx;
  17. var that=this;
  18. clearTimeout(this.myTimeout);
  19. this.myTimeout = setTimeout(function () {
  20. var alreadyUsed = [];
  21. chart.data.datasets.forEach(function (dataset, i) {
  22. var txt = dataset.label;
  23. var txtSize = ctx.measureText(txt).width;
  24. var meta = chart.getDatasetMeta(i);
  25. if (meta.type === "bubble") { //exclude scatter
  26. var fontSize = 10;
  27. var fontStyle = 'normal';
  28. var fontFamily = 'Helvetica Neue';
  29. ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
  30. ctx.fillStyle = 'rgb(0, 0, 0)';
  31. ctx.textAlign = 'left';
  32. ctx.textBaseline = 'middle';
  33. var padding, position, x_from, x_to, y, y_from, y_to;
  34. meta.data.forEach(function (element, index) {
  35. padding = element.options.radius;
  36. position = element.tooltipPosition();
  37. x_from = position.x + padding + 5; // left
  38. x_to = x_from + txtSize; // left
  39. y = position.y; // top
  40. y_from = y - (fontSize * 0.5);
  41. y_to = y + (fontSize * 0.5);
  42. var item={
  43. 'y_from': y_from,
  44. 'y_to': y_to,
  45. 'x_from': x_from,
  46. 'x_to': x_to,
  47. };
  48. item=that.getNewYPostion(item, alreadyUsed, fontSize);
  49. alreadyUsed.push(item);
  50. ctx.fillText(txt, item.x_from, item.y_from+(0.5*fontSize));
  51. });
  52. }
  53. });
  54. }, 500);
  55. }
  56. };
展开查看全部
yr9zkbsy

yr9zkbsy5#

在2022年的当前版本是3.9.1这里是一个工作片段:
第一个

相关问题