Chart.js 工具提示图表的左侧或右侧偏移

Chart.js 工具提示图表的左侧或右侧偏移,chart.js,Chart.js,我对自定义位置工具提示有问题。 我不能定制任何人可以帮我一些小费吗? 如何使工具提示离点更远 //Individual chart config var ctx = "myChart"; var myChart = new Chart(ctx, { type: 'line', options: { title: { display: true, text: 'lala', }, layout: { padding: 32

我对自定义位置工具提示有问题。 我不能定制任何人可以帮我一些小费吗? 如何使工具提示离点更远

 //Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    title: {
      display: true,
      text: 'lala',
    },
    layout: {
      padding: 32
    },
    tooltips: {

      position: 'custom'
    },
  },
  data: {
    labels: ['0%', '10%', '20%', '30%', '40%', '50%'],
    datasets: [{
      label: 'one',
      data: [44, 44, 55, 16, 33, 45],
      borderColor: '#ab045',
      backgroundColor: 'RGBA(33, 55, 167, .1)',
      pointBorderColor: "#4ad1C0",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }, {
      label: 'two',
      data: [82, 12, 24, 30, 2, 5],
      borderColor: '#34315a',
      backgroundColor: 'RGBA(33, 23, 124, .7)',
      pointBorderColor: "#34495e",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }]
  }
});

可以通过向Chart.Tooltip.positioners映射()添加函数来定义My

新模式。此函数用于返回工具提示的x和y位置

您可以添加一个自定义的来调整x的偏移量

 //register custome positioner
Chart.Tooltip.positioners.custom = function(elements, position) {
    if (!elements.length) {
      return false;
    }
    var offset = 0;
    //adjust the offset left or right depending on the event position
    if (elements[0]._chart.width / 2 > position.x) {
      offset = 20;
    } else {
      offset = -20;
    }
    return {
      x: position.x + offset,
      y: position.y
    }
  }
渲染图表时,不要忘记将自定义函数设置到选项中


示例工作

很有魅力!!谢谢!