javascript - 从 Chart.js 的数据点进一步移动工具提示？

Question

我今天开始弄乱 Chart.js，到目前为止，它的易懂性给我留下了深刻的印象，即使对于像我这样的 JavaScript 初学者也是如此。

我想在工具提示和图表上的数据点之间添加一些水平间距。默认情况下，插入点接触数据点。我想不通。我知道有一个 position 选项，但我不太明白它是如何使用的。我也尝试使用 tooltips: { x } 选项，但也没有成功。我猜我误解了那是干什么用的。

下面是我到目前为止的一张图表...

谢谢，感激不尽!

//Global Chart.js options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.elements.responsive = true;
Chart.defaults.global.tooltips.xPadding = 10;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.global.tooltips.titleMarginBottom = 10;
Chart.defaults.global.tooltips.position = 'average';

//Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    title: {
      display: true,
      text: 'Precision-Recall Curve',
    },
    layout: {
      padding: 32
    },
    tooltips: {
      x: 20
    },
  },
  data: {
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
    datasets: [{
      label: 'Precision',
      data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18],
      borderColor: '#1abc9c',
      backgroundColor: 'RGBA(26, 188, 156, .4)',
      pointBorderColor: "#4BC0C0",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }, {
      label: 'Recall',
      data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93],
      borderColor: '#34495e',
      backgroundColor: 'RGBA(52, 73, 94, .3)',
      pointBorderColor: "#34495e",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }]
  }
});

<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

Answer 1

我有一些接近的东西，工具提示可以接受 position，它是存储在 Chart.Tooltip.positioners 中的函数的别名。此函数返回工具提示的 x 和 y 位置。

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

唯一的问题是，通过调整 x，工具提示的布局(左/右方向)可以改变，这意味着即使在计算出工具提示低于一半或高于一半之后，调整 x 也会切换它在中间工具提示上的布局含义看起来很奇怪，因为它在错误的方向上偏移。

这可以通过了解工具提示的宽度并考虑到这一点来解决，但查看提供给未给出的函数的数据。

无论如何，把这个作为答案，它会让你完成大部分工作，你/某人可能会想出如何摆脱最后那部分烦人的方法

//Global Chart.js options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.elements.responsive = true;
Chart.defaults.global.tooltips.xPadding = 10;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.global.tooltips.titleMarginBottom = 10;
Chart.defaults.global.tooltips.position = 'average';

//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
    }
  }
  //Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    title: {
      display: true,
      text: 'Precision-Recall Curve',
    },
    layout: {
      padding: 32
    },
    tooltips: {
      //use our new custom position
      position: 'custom'
    },
  },
  data: {
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
    datasets: [{
      label: 'Precision',
      data: [2, 42, 55, 50, 42, 38, 32, 24, 20, 18, 18],
      borderColor: '#1abc9c',
      backgroundColor: 'RGBA(26, 188, 156, .4)',
      pointBorderColor: "#4BC0C0",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }, {
      label: 'Recall',
      data: [2, 12, 24, 30, 39, 58, 70, 82, 86, 89, 93],
      borderColor: '#34495e',
      backgroundColor: 'RGBA(52, 73, 94, .3)',
      pointBorderColor: "#34495e",
      pointBackgroundColor: "#fff",
      pointHitRadius: 10
    }]
  }
});

<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>