小编use*_*613的帖子

ChartJs 自定义工具提示位置

那里。我使用 ChartJS 并自定义工具提示，但是第一个和最后一个工具提示的位置有问题。看：

我想为了解决这个问题，我需要使用https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes 但是，我无法理解公式应该是什么。

CodePen 示例 - https://codepen.io/anon/pen/JzRooy

<html>

<head>
	<title>Line Chart with Custom Tooltips</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
	<script>
	window.chartColors = {
		red: 'rgb(255, 99, 132)',
		orange: 'rgb(255, 159, 64)',
		yellow: 'rgb(255, 205, 86)',
		green: 'rgb(75, 192, 192)',
		blue: 'rgb(54, 162, 235)',
		purple: 'rgb(153, 102, 255)',
		grey: 'rgb(231,233,237)'
	};

	window.randomScalingFactor = function() {
		return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
	}
	</script>
	<style>
		canvas{
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
		#chartjs-tooltip {
			opacity: …

Run Code Online (Sandbox Code Playgroud)

javascript charts chart.js

use*_*613

lucky-day

8
推荐指数

2
解决办法

1万
查看次数

悬停和在线阴影时的 Chart.js 垂直线

所以，我将 Chart.js 用于我的项目，这就是我在 PSD 中看到的。

好的。我开始探索这个问题，实际上找到了我的问题的答案。分别地。

对于垂直线 -使用 chart.js 悬停在图表上时移动垂直线

对于阴影 - https://jsfiddle.net/dces93wv/或https://github.com/chartjs/Chart.js/issues/4977

但是几个小时以来，我一直无法弄清楚如何将这两种方法结合起来。:(

const ShadowLineElement = Chart.elements.Line.extend({
  draw () {
  
    const { ctx } = this._chart

    const originalStroke = ctx.stroke

    ctx.stroke = function () {
      ctx.save()
      ctx.shadowColor = 'red'
      ctx.shadowBlur = 0
      ctx.shadowOffsetX = 0
      ctx.shadowOffsetY = 8
      originalStroke.apply(this, arguments)
      ctx.restore()
    }
    
    Chart.elements.Line.prototype.draw.apply(this, arguments)
    
    ctx.stroke = originalStroke;
  }
})

Chart.defaults.ShadowLine = Chart.defaults.line
Chart.controllers.ShadowLine = Chart.controllers.line.extend({
  datasetElementType: ShadowLineElement
})

new Chart(document.getElementById('canvas'), {
      type: 'ShadowLine',
      data: {
        datasets: …

Run Code Online (Sandbox Code Playgroud)

javascript charts chart.js chart.js2

use*_*613

lucky-day

2
推荐指数

1
解决办法

4430
查看次数