Question

我对自定义位置工具提示有疑问。我不能自定义任何人都可以帮我一些提示吗？我怎样才能使工具提示远离该点？

 //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
    }]
  }
});

我的Fiddle

Answer 1

可以通过向Chart.Tooltip.positioners映射（DOC）添加功能来定义新模式。此函数返回工具提示的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
    }
  }

渲染图表时，请不要忘记将自定义函数设置为选项

Fiddle示例工作

在工具提示图表的左侧或右侧偏移

1 个答案: