Javascript ChartJ保持点的位置，将图像与标签放在一起

我在和charjs斗争。我不知道如何准确地保持这些点的位置。我还想在标签旁边放一张图片（你可以在图片中看到我想看到的方式）。我将感谢任何帮助。

下面你可以看到我的代码。正如你们所看到的，我使用了datalabels插件来显示点内部的标签。 不要对详细的考虑感到困惑。视情况而定，我正在想象一个稍微不同的图形

  <div>
    <canvas id="dh"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'
import 'chartjs-plugin-dragdata'
import 'chartjs-chart-graph'
import 'chartjs-plugin-datalabels'

//const data = `https://raw.githubusercontent.com/sgratzl/chartjs-chart-graph/master/samples/tree.json`
let clickCount = 0
let singleClickTimer

export default {
  name: 'CDiagramChart',
  props: {
    data: {
      type: Array,
      default: null
    },
    detailed: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    let images = []
    this.data.forEach(element => {
      this.$logger.log(element)
      images.push('https://i.stack.imgur.com/2RAv2.png')
    })
    this.$logger.log(images)
    function createChart(nodes, id, type, orientation, detailed) {
      if (detailed) {
        new Chart(document.getElementById(id).getContext('2d'), {
          type,
          data: {
            labels: nodes.map(d => d.name),
            datasets: [
              {
                borderWidth: 1,
                lineTension: 0,
                borderColor: 'steelblue',
                pointBackgroundColor: 'orange',
                pointRadius: 50,
                pointHoverRadius: 50,
                pointStyle: 'rect',
                data: nodes.map(d => Object.assign({}, d))
              }
            ]
          },
          options: {
            dragData: true,
            dragX: true,
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1,
            scales: {
              xAxes: [
                {
                  ticks: {
                    min: -1,
                    max: 2,
                    stepSize: 1,
                    fixedStepSize: 1
                  }
                }
              ],
              yAxes: [
                {
                  ticks: {
                    min: -2,
                    max: 1,
                    stepSize: 1,
                    fixedStepSize: 1
                  }
                }
              ]
            },
            tooltips: {
              enabled: true,
              intersect: false
            },
            tree: {
              orientation
            },
            legend: {
              display: false
            },
            layout: {
              padding: {
                top: 0,
                left: 50,
                right: 50,
                bottom: 0
              }
            },
            plugins: {
              datalabels: {
                display: true,
                align: orientation === 'vertical' ? 'bottom' : 'center',
                font: {
                  size: 16,
                  family: 'Arial'
                },
                formatter: v => {
                  return v.name
                }
              }
            },
            onClick: function(event, dataAtClick) {
              clickCount++
              if (clickCount === 1) {
                singleClickTimer = setTimeout(function() {
                  clickCount = 0
                  console.log('Single Click', dataAtClick[0]?._index)
                }, 400)
              } else if (clickCount === 2) {
                clearTimeout(singleClickTimer)
                clickCount = 0
                console.log('Double Click', dataAtClick[0]?._index)
              }
            }
          }
        })
      } else {
        new Chart(document.getElementById(id).getContext('2d'), {
          type,
          data: {
            labels: nodes.map(d => d.name),
            datasets: [
              {
                borderWidth: 1,
                lineTension: 0,
                borderColor: 'steelblue',
                pointBackgroundColor: 'orange',
                pointRadius: 50,
                pointHoverRadius: 50,
                pointStyle: 'rect',
                data: nodes.map(d => Object.assign({}, d))
              }
            ]
          },
          options: {
            dragData: false,
            dragX: false,
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1,
            scales: {
              xAxes: [
                {
                  ticks: {
                    min: -1,
                    max: 1,
                    stepSize: 1,
                    fixedStepSize: 1
                  }
                }
              ],
              yAxes: [
                {
                  ticks: {
                    min: -1,
                    max: 1,
                    stepSize: 1,
                    fixedStepSize: 1
                  }
                }
              ]
            },
            tooltips: {
              enabled: true,
              intersect: false
            },
            tree: {
              orientation
            },
            legend: {
              display: false
            },
            layout: {
              padding: {
                top: 0,
                left: 50,
                right: 50,
                bottom: 0
              }
            },
            plugins: {
              datalabels: {
                display: true,
                align: orientation === 'vertical' ? 'bottom' : 'center',
                font: {
                  size: 16,
                  family: 'Arial'
                },
                formatter: v => {
                  return v.name
                }
              }
            },
            onClick: function(event, dataAtClick) {
              clickCount++
              if (clickCount === 1) {
                singleClickTimer = setTimeout(function() {
                  clickCount = 0
                  console.log('Single Click', dataAtClick[0]?._index)
                }, 400)
              } else if (clickCount === 2) {
                clearTimeout(singleClickTimer)
                clickCount = 0
                console.log('Double Click', dataAtClick[0]?._index)
              }
            }
          }
        })
      }
    }
    createChart(this.data, 'dh', 'dendogram', 'horizontal', this.detailed)
  }
}
</script>

<style scoped>
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
</style>

从“Chart.js”导入图表
导入“chartjs插件dragdata”
导入“chartjs图表”
导入“chartjs插件数据标签”
//常数数据=`https://raw.githubusercontent.com/sgratzl/chartjs-chart-graph/master/samples/tree.json`
单击计数=0
让我们单击计时器
导出默认值{
名称：“CDiagramChart”，
道具：{
数据：{
类型：数组，
默认值：null
},
详细说明：{
类型：布尔型，
默认值：false
}
},
安装的（）{
让图像=[]
this.data.forEach（元素=>{
此.$logger.log（元素）
图像。推送（'https://i.stack.imgur.com/2RAv2.png')
})
此.$logger.log（图像）
函数createChart（节点、id、类型、方向、详细信息）{
如有（详情）{
新图表（document.getElementById（id）.getContext（'2d'）{
类型，
数据：{
标签：nodes.map（d=>d.name），
数据集：[
{
边框宽度：1，
线张力：0，
边框颜色：“钢蓝色”，
pointBackgroundColor:'橙色'，
点半径：50，
点半径：50，
pointStyle:'rect'，
数据：nodes.map（d=>Object.assign（{}，d））
}
]
},
选项：{
德拉格达塔：没错，
没错，
回答：是的，
维护Aspectratio：是的，
方面：1，
比例：{
xAxes：[
{
滴答声：{
最小：-1，
最高：2，
步长：1，
固定步长：1
}
}
],
雅克斯：[
{
滴答声：{
最小：-2，
最高：1，
步长：1，
固定步长：1
}
}
]
},
工具提示：{
启用：对，
交集：错
},
树：{
方向
},
图例：{
显示：假
},
布局：{
填充：{
排名：0，
左:50,，
右:50,，
底部：0
}
},
插件：{
数据标签：{
显示：对，
对齐：方向===‘垂直’？‘底部’：‘中心’，
字体：{
尺码：16，
家庭：“Arial”
},
格式化程序：v=>{
返回v.name
}
}
},
onClick：函数（事件、数据点击）{
点击计数++
如果（单击计数===1）{
singleClickTimer=setTimeout（函数（）{
单击计数=0
console.log（'Single Click'，dataAtClick[0]？。\u index）
}, 400)
}否则如果（单击计数===2）{
clearTimeout（singleClickTimer）
单击计数=0
console.log（'双击'，数据点击[0]？。\u索引）
}
}
}
})
}否则{
新图表（document.getElementById（id）.getContext（'2d'）{
类型，
数据：{
标签：nodes.map（d=>d.name），
数据集：[
{
边框宽度：1，
线张力：0，
边框颜色：“钢蓝色”，
pointBackgroundColor:'橙色'，
点半径：50，
点半径：50，
pointStyle:'rect'，
数据：nodes.map（d=>Object.assign（{}，d））
}
]
},
选项：{
德拉格达塔：错，
dragX:错，
回答：是的，
维护Aspectratio：是的，
方面：1，
比例：{
xAxes：[
{
滴答声：{
最小：-1，
最高：1，
步长：1，
固定步长：1
}
}
],
雅克斯：[
{
滴答声：{
最小：-1，
最高：1，
步长：1，
固定步长：1
}
}
]
},
工具提示：{
启用：对，
交集：错
},
树：{
方向
},
图例：{
显示：假
},
布局：{
填充：{
排名：0，
左:50,，
右:50,，
底部：0
}
},
插件：{
数据标签：{
显示：对，
对齐：方向===‘垂直’？‘底部’：‘中心’，
字体：{
尺码：16，
家庭：“Arial”
},
格式化程序：v=>{
返回v.name
}
}
},
onClick：函数（事件、数据点击）{
点击计数++