如何更改 Chart.js (2.9.4) 中的工具提示方向? [英] How to change tooltip direction in Chart.js (2.9.4)?

问题描述

我在 Chart.js 2.9.4 中有一个堆积条形图.

悬停时，工具提示的提示位于每个栏的顶部中心，但工具提示本身会呈现在右侧并挡住其他栏的视图.

我想在栏上方绘制工具提示.有没有办法做到这一点?

---

相关部分代码:

var myChart = new Chart('my-chart', {类型:'酒吧'，数据:{数据集:数据集}，选项: {悬停:{模式:'数据集'，动画持续时间:0},工具提示:{模式:'最近的'，yAlign: 'bottom'//使用它来控制工具提示相对于其点的位置},秤:{x轴:[{堆叠:真实，类型:'时间'，时间: {单位:'天'，},偏移量:真，滴答声:{来源:'数据'}}],y轴:[{堆叠:真实，滴答声:{分钟:0，最大值:1.0}}]}}});

官方文档中没有提到，但适用于 Chart.js 2.9.4
(你可以看看 源代码，其中该选项用于覆盖基于工具提示和图表大小的自动对齐计算)

I have a stacked bar chart in Chart.js 2.9.4.

On hovering, the tooltip's tip is positioned at the top-center of each bar, but the tooltip itself is rendered to the right and blocks the view of other bars.

I'd like to draw the tooltip above the bar. Is there a way to do this?

See the JSFiddle here.

---

(Here's the raw code as required by StackOverflow)

// Get the past 14 days for the x-axis
var allDates = [
    moment('2021-04-04T00:00:00'),
    moment('2021-04-05T00:00:00'),
    moment('2021-04-06T00:00:00'),
    moment('2021-04-07T00:00:00'),
    moment('2021-04-08T00:00:00'),
    moment('2021-04-09T00:00:00'),
    moment('2021-04-10T00:00:00'),
    moment('2021-04-11T00:00:00'),
    moment('2021-04-12T00:00:00'),
    moment('2021-04-13T00:00:00'),
    moment('2021-04-14T00:00:00'),
    moment('2021-04-15T00:00:00'),
    moment('2021-04-16T00:00:00'),
    moment('2021-04-17T00:00:00'),
    moment('2021-04-18T00:00:00'),
];

// Simulated distribution per day
var distributionPerDay = [
  [0.13, 0.05, 0.12, 0.07, 0.11, 0.14, 0.22, 0.06, 0.  , 0.1 ],
  [0.1 , 0.08, 0.1 , 0.09, 0.13, 0.12, 0.18, 0.11, 0.03, 0.06],
  [0.08, 0.1 , 0.1 , 0.09, 0.15, 0.1 , 0.2 , 0.09, 0.03, 0.06],
  [0.09, 0.09, 0.12, 0.07, 0.13, 0.12, 0.15, 0.14, 0.01, 0.08],
  [0.05, 0.05, 0.16, 0.13, 0.1 , 0.1 , 0.1 , 0.1 , 0.11, 0.1 ],
  [0.05, 0.05, 0.16, 0.13, 0.1 , 0.13, 0.1 , 0.12, 0.07, 0.09],
  [0.08, 0.05, 0.15, 0.1 , 0.13, 0.1 , 0.12, 0.13, 0.08, 0.06],
  [0.1 , 0.08, 0.13, 0.07, 0.1 , 0.13, 0.15, 0.1 , 0.05, 0.09],
  [0.08, 0.1 , 0.12, 0.08, 0.13, 0.1 , 0.13, 0.07, 0.07, 0.12],
  [0.12, 0.08, 0.1 , 0.04, 0.1 , 0.14, 0.11, 0.12, 0.09, 0.1 ],
  [0.08, 0.06, 0.16, 0.07, 0.07, 0.19, 0.07, 0.14, 0.11, 0.05],
  [0.08, 0.1 , 0.1 , 0.09, 0.1 , 0.16, 0.12, 0.12, 0.06, 0.07],
  [0.12, 0.09, 0.14, 0.04, 0.16, 0.08, 0.12, 0.1 , 0.12, 0.03],
  [0.09, 0.16, 0.1 , 0.07, 0.13, 0.1 , 0.1 , 0.11, 0.08, 0.06],
  [0.13, 0.12, 0.13, 0.04, 0.15, 0.11, 0.06, 0.12, 0.06, 0.08]
]

// Define colors for each bar (10 bars)
var colors = ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'];  // cb-Spectral

// Convert distribution into Chart.js datasets
var classNames = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var datasets = [];
classNames.forEach(function(className, i) {
  // Gather the data {x: date, y: percentage} for this class
  var data = [];
  distributionPerDay.forEach(function(dist, j) {
    data.push({x: allDates[j], y: dist[i]});
  });

  // Add data and config to the datasets array
  datasets.push({
    label: className,
    data: data,
    backgroundColor: colors[i],
    borderWidth: 0,
    borderColor: 'black',
    hoverBorderWidth: 1,  // Show a 1px black border on hover
    borderSkipped: false,  // Draw all four borders around the bar
    minBarLength: 1  // So even a bar for 0 has 1px height
  });
});

var myChart = new Chart('my-chart', {
  type: 'bar',
  data: { datasets: datasets },
  options: {
    hover: {
      mode: 'dataset',  // Highlight an entire row on hover
      animationDuration: 0  // Otherwise there is flickering when sliding over the bars quickly
    },
    tooltips: {
      mode: 'nearest',  // Only show tooltip data of one bar on hover
    },
    scales: {
      xAxes: [{
        stacked: true,
        type: 'time',
        time: {
          unit: 'day',
        },
        offset: true,  // Otherwise the left and right bars are cut off
        ticks: { source: 'data' }  // Use one tick per point in allDates
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          min: 0,
          max: 1.0
        }
      }]
    }
  }
});

解决方案

You can set yAlign: 'bottom' in tooltip options, see the JSFiddle here

---

Relevant part of the code:

var myChart = new Chart('my-chart', {
  type: 'bar',
  data: { datasets: datasets },
  options: {
    hover: {
      mode: 'dataset',  
      animationDuration: 0
    },
    tooltips: {
      mode: 'nearest',
      yAlign: 'bottom' //use this to control the placement of the tooltip relative to its point
    },
    scales: {
      xAxes: [{
        stacked: true,
        type: 'time',
        time: {
          unit: 'day',
        },
        offset: true,
        ticks: { source: 'data' }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          min: 0,
          max: 1.0
        }
      }]
    }
  }
});

It isn't mentioned in the official documentation, but works for Chart.js 2.9.4
(you can have a look at the source code where that option is used to override the automatic alignment calculation based on tooltip and chart size)

这篇关于如何更改 Chart.js (2.9.4) 中的工具提示方向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！