mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-09 05:39:06 +02:00
74 lines
1.4 KiB
JavaScript
74 lines
1.4 KiB
JavaScript
|
const pointStyles = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'];
|
||
|
|
||
|
function newDataset(pointStyle, i) {
|
||
|
return {
|
||
|
label: '',
|
||
|
data: pointStyles.map(() => i),
|
||
|
pointStyle: pointStyle,
|
||
|
pointBackgroundColor: '#0000ff',
|
||
|
pointBorderColor: '#00ff00',
|
||
|
showLine: false
|
||
|
};
|
||
|
}
|
||
|
module.exports = {
|
||
|
config: {
|
||
|
type: 'line',
|
||
|
data: {
|
||
|
datasets: pointStyles.map((pointStyle, i) => newDataset(pointStyle, i)),
|
||
|
labels: pointStyles.map(() => '')
|
||
|
},
|
||
|
options: {
|
||
|
legend: false,
|
||
|
title: false,
|
||
|
scales: {
|
||
|
x: {display: false},
|
||
|
y: {display: false}
|
||
|
},
|
||
|
elements: {
|
||
|
line: {
|
||
|
fill: false
|
||
|
}
|
||
|
},
|
||
|
tooltips: {
|
||
|
mode: 'nearest',
|
||
|
intersect: false,
|
||
|
usePointStyle: true,
|
||
|
callbacks: {
|
||
|
label: function() {
|
||
|
return '\u200b';
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
layout: {
|
||
|
padding: 15
|
||
|
}
|
||
|
},
|
||
|
plugins: [{
|
||
|
afterDraw: function(chart) {
|
||
|
var canvas = chart.canvas;
|
||
|
var rect = canvas.getBoundingClientRect();
|
||
|
var point, event;
|
||
|
|
||
|
for (var i = 0; i < pointStyles.length; ++i) {
|
||
|
point = chart.getDatasetMeta(i).data[i];
|
||
|
event = {
|
||
|
type: 'mousemove',
|
||
|
target: canvas,
|
||
|
clientX: rect.left + point.x,
|
||
|
clientY: rect.top + point.y
|
||
|
};
|
||
|
chart._handleEvent(event);
|
||
|
chart.tooltip.handleEvent(event);
|
||
|
chart.tooltip.draw(chart.ctx);
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
},
|
||
|
options: {
|
||
|
canvas: {
|
||
|
height: 256,
|
||
|
width: 512
|
||
|
}
|
||
|
}
|
||
|
};
|