如何在不移动折线边框的情况下调整Point（三角形箭头）的偏移量

我找不到移动Chart.js中点位置的方法，已经将点样式改为triangle来模拟箭头，现在需要把它对齐到图表边框左侧。

当前实现代码如下：

const data = {
  labels: chartLabels,
  datasets: [{
    data: chartData,
    borderWidth: 2,
    fill: true,
    borderColor: ["#03A9F5"],
    backgroundColor: '#4985ff45',
    pointStyle: 'triangle',
    pointBackgroundColor: "#03A9F5",
    pointRadius: 7,
    // pointOffsetX: -5 要是有这个属性就好了，可惜没有...
    hoverRadius: 10,
    rotation: 90,
  }]
};

解决方法 #

Chart.js原生没有提供直接偏移点位置的pointOffsetX属性，你可以通过自定义插件来调整点的绘制位置，实现左对齐边框的效果：

1. 编写自定义插件，在数据集绘制完成后修改点的坐标：

const leftAlignPointPlugin = {
  id: 'leftAlignPoint',
  afterDatasetDraw(chart) {
    // 目标数据集索引，根据你的实际情况调整
    const targetIndex = 0;
    const datasetMeta = chart.getDatasetMeta(targetIndex);
    // 获取图表左侧边框的X坐标
    const leftBorderX = chart.scales.x.left;

    datasetMeta.data.forEach(point => {
      // 将点的X坐标设置为左侧边框位置
      point.x = leftBorderX;
      // 重新绘制点
      point.draw(chart.ctx);
    });
  }
};

2. 初始化图表时注册该插件：

new Chart(document.getElementById('yourChartId'), {
  type: 'line', // 根据你的图表类型调整，如折线图、柱状图等
  data: data,
  plugins: [leftAlignPointPlugin],
  // 其他图表配置项...
});

如果只需要调整特定位置的点，在forEach循环中添加索引判断即可。

内容的提问来源于stack exchange，提问作者Nar Jovan