Chart.js 工具提示图表的左侧或右侧偏移
我对自定义位置工具提示有问题。 我不能定制任何人可以帮我一些小费吗? 如何使工具提示离点更远Chart.js 工具提示图表的左侧或右侧偏移,chart.js,Chart.js,我对自定义位置工具提示有问题。 我不能定制任何人可以帮我一些小费吗? 如何使工具提示离点更远 //Individual chart config var ctx = "myChart"; var myChart = new Chart(ctx, { type: 'line', options: { title: { display: true, text: 'lala', }, layout: { padding: 32
//Individual chart config
var ctx = "myChart";
var myChart = new Chart(ctx, {
type: 'line',
options: {
title: {
display: true,
text: 'lala',
},
layout: {
padding: 32
},
tooltips: {
position: 'custom'
},
},
data: {
labels: ['0%', '10%', '20%', '30%', '40%', '50%'],
datasets: [{
label: 'one',
data: [44, 44, 55, 16, 33, 45],
borderColor: '#ab045',
backgroundColor: 'RGBA(33, 55, 167, .1)',
pointBorderColor: "#4ad1C0",
pointBackgroundColor: "#fff",
pointHitRadius: 10
}, {
label: 'two',
data: [82, 12, 24, 30, 2, 5],
borderColor: '#34315a',
backgroundColor: 'RGBA(33, 23, 124, .7)',
pointBorderColor: "#34495e",
pointBackgroundColor: "#fff",
pointHitRadius: 10
}]
}
});
可以通过向Chart.Tooltip.positioners映射()添加函数来定义My新模式。此函数用于返回工具提示的x和y位置 您可以添加一个自定义的来调整x的偏移量
//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
}
}
渲染图表时,不要忘记将自定义函数设置到选项中
示例工作很有魅力!!谢谢!