Question

我今天开始搞乱Chart.js了，到目前为止，我对它的理解是多么容易让人印象深刻，即使像我这样的javascript初学者也是如此。

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

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

谢谢，谢谢！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

唯一的问题是，通过调整x，工具提示的布局（左/右方向）可以改变意义，即使在工作时如果工具尖端低于中途或高于一半调整x它然后切换它在中间的工具提示中的布局意义看起来很奇怪，因为它在错误的方向上偏移。

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

无论如何把它留作答案它会让你大部分时间在那里，你/某人可能能够弄清楚如何摆脱烦人的最后一部分

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为通过更改caretPadding的数量会更简单。我们可以通过caretPadding来增加从工具提示到数据点的距离

option: {
   tooltip: {
       caretPadding: 20,
   }
}

caretPadding-image

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

2 个答案: