从Chart.js的数据点进一步移动工具提示？ [英] Move tooltip further from data point for Chart.js?

问题描述

今天我开始搞乱Chart.js了，到目前为止，我真的很容易理解，即使对于像我这样的javascript初学者也是如此。

I started messing with Chart.js today, and I'm really impressed so far by how easy it is to understand, even for a javascript beginner like myself.

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

I'm wanting to add some spacing horizontally between the tooltip and the data point on the graph. By default, the caret point touches the data point. I can't figure it out. I know there's a position option, but I don't quite get how it's used. I also tried using the tooltips: { x } option but no luck either. Guessing I'm misunderstanding what that is for.

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

Below is what I have so far for one chart...

谢谢，非常感谢！

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

推荐答案

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

I have something close, tooltips can accept a position which is an alias for a function stored in Chart.Tooltip.positioners. This function returns the x and y position for the tooltip.

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

You can add a custom one to adjust the x at an offset.

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

The only issue is that by adjust the x the layout (left/right direction) of the tooltip can change meaning that even after working out if the tool tip is below half way or above half way bu adjusting the x it then switches its layout meaning on tooltip in the middle will look odd as it is offset in the wrong direction.

这可能是通过了解工具提示的宽度来确定并考虑到这一点，但查看提供给函数的数据，这是不会给出的。

This could be fixed by knowing the width of the tooltip and taking this into account but looking through the data provided to the function this is not given.

无论如何将此作为答案得到它你大部分的方式和你/某人可能能够弄清楚如何摆脱烦人的最后一部分

Anyway leaving this as an answer it gets you most of the way there and you/someone might be able to figure out how to get rid of that annoying last part

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

这篇关于从Chart.js的数据点进一步移动工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！