mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-09 05:39:06 +02:00
c68ec57672
* Allow the tooltip to get closer to the canvas edge Closer to the top & bottom by considering (height/2) instead of height. * Update missing options in TS types * Remove unneeded brackets
104 lines
2.2 KiB
JavaScript
104 lines
2.2 KiB
JavaScript
var patternCanvas = document.createElement('canvas');
|
|
var patternContext = patternCanvas.getContext('2d');
|
|
|
|
patternCanvas.width = 6;
|
|
patternCanvas.height = 6;
|
|
patternContext.fillStyle = '#ff0000';
|
|
patternContext.fillRect(0, 0, 6, 6);
|
|
patternContext.fillStyle = '#ffff00';
|
|
patternContext.fillRect(0, 0, 4, 4);
|
|
|
|
var pattern = patternContext.createPattern(patternCanvas, 'repeat');
|
|
|
|
var gradient;
|
|
|
|
module.exports = {
|
|
config: {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{
|
|
data: [8, 8, 8, 8, 8, 8, 7, 8, 8, 8, 8],
|
|
pointBorderColor: '#ff0000',
|
|
pointBackgroundColor: '#00ff00',
|
|
showLine: false
|
|
}, {
|
|
label: '',
|
|
data: [4, 4, 4, 4, 4, 5, 3, 4, 4, 4, 4],
|
|
pointBorderColor: pattern,
|
|
pointBackgroundColor: pattern,
|
|
showLine: false
|
|
}, {
|
|
label: '',
|
|
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
|
|
showLine: false
|
|
}],
|
|
labels: ['', '', '', '', '', '', '', '', '', '', '']
|
|
},
|
|
options: {
|
|
legend: false,
|
|
title: false,
|
|
scales: {
|
|
x: {display: false},
|
|
y: {display: false}
|
|
},
|
|
elements: {
|
|
line: {
|
|
fill: false
|
|
}
|
|
},
|
|
tooltips: {
|
|
mode: 'nearest',
|
|
intersect: false,
|
|
callbacks: {
|
|
label: function() {
|
|
return '\u200b';
|
|
}
|
|
}
|
|
},
|
|
layout: {
|
|
padding: 15
|
|
}
|
|
},
|
|
plugins: [{
|
|
beforeDatasetsUpdate: function(chart) {
|
|
if (!gradient) {
|
|
gradient = chart.ctx.createLinearGradient(0, 0, 512, 256);
|
|
gradient.addColorStop(0, '#ff0000');
|
|
gradient.addColorStop(1, '#0000ff');
|
|
}
|
|
chart.config.data.datasets[2].pointBorderColor = gradient;
|
|
chart.config.data.datasets[2].pointBackgroundColor = gradient;
|
|
|
|
return true;
|
|
},
|
|
afterDraw: function(chart) {
|
|
var canvas = chart.canvas;
|
|
var rect = canvas.getBoundingClientRect();
|
|
var point, event;
|
|
|
|
for (var i = 0; i < 3; ++i) {
|
|
for (var j = 0; j < 11; ++j) {
|
|
point = chart.getDatasetMeta(i).data[j];
|
|
event = {
|
|
type: 'mousemove',
|
|
target: canvas,
|
|
clientX: rect.left + point.x,
|
|
clientY: rect.top + point.y
|
|
};
|
|
chart._handleEvent(event);
|
|
chart.tooltip.handleEvent(event);
|
|
chart.tooltip.opacity = j / 10;
|
|
chart.tooltip.draw(chart.ctx);
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
},
|
|
options: {
|
|
canvas: {
|
|
height: 256,
|
|
width: 512
|
|
}
|
|
}
|
|
};
|