Chart.js - 当光标移出主界面时禁用工具提示 canvas
Chart.js - disable tooltip when cursor moves outside the main canvas
我有一个折线图,我这样设置工具提示
options: {
tooltips:{
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
它工作正常。我遇到的问题是,当我将光标移动到主 plot/canvas 之外的 x 轴刻度时,会出现工具提示静止图像。我尝试设置 intersect: true
但工具提示仅在我将鼠标直接悬停在这些点上时才会显示。理想情况下,我希望工具提示在我悬停在垂直网格线上时出现(发生在 intersect:false
时),但当我的光标移出主要 canvas 时不出现。可能吗?
您可以使用选项中的 onHover
回调来检查鼠标是否在 chartArea
如果是,则将工具提示设置为启用,否则禁用工具提示。
您可能还想检查您设置的值是否已经是正确的值,因为它会节省很多不必要的更新
示例(V2):
const updateTooltipShow = (chart, enabled) => {
chart.options.tooltips.enabled = enabled;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: "rgba(153,255,51,0.6)"
},
]
},
options: {
onHover: function(e, activeElements) {
const {
bottom,
top,
right,
left
} = this.chartArea;
if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
updateTooltipShow(this, true)
} else {
updateTooltipShow(this, false)
}
},
tooltips: {
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
示例(V3):
const updateTooltipShow = (chart, enabled) => {
chart.options.plugins.tooltip.enabled = enabled;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: "rgba(153,255,51,0.6)"
},
]
},
options: {
onHover: (e, activeElements, chart) => {
const {
bottom,
top,
right,
left
} = chart.chartArea;
if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
updateTooltipShow(chart, true)
} else {
updateTooltipShow(chart, false)
}
},
plugins: {
tooltip: {
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
}
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
我编写了一个简单的插件,用于在您将光标移出主菜单时隐藏标题 canvas:
plugins: [{
id: "toolbarHider",
afterEvent: (chart: any, evt: any, opts: any) => {
const { left, right, bottom, top } = chart.chartArea;
const e = evt.event;
const status = e.x >= left && e.x <= right && e.y <= bottom && e.y >= top;
if (status !== chart.options.plugins.tooltip.enabled) {
chart.options.plugins.tooltip.enabled = status;
chart.update();
}
}
}]
更多关于 Chart.js plugins。
我有一个折线图,我这样设置工具提示
options: {
tooltips:{
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
它工作正常。我遇到的问题是,当我将光标移动到主 plot/canvas 之外的 x 轴刻度时,会出现工具提示静止图像。我尝试设置 intersect: true
但工具提示仅在我将鼠标直接悬停在这些点上时才会显示。理想情况下,我希望工具提示在我悬停在垂直网格线上时出现(发生在 intersect:false
时),但当我的光标移出主要 canvas 时不出现。可能吗?
您可以使用选项中的 onHover
回调来检查鼠标是否在 chartArea
如果是,则将工具提示设置为启用,否则禁用工具提示。
您可能还想检查您设置的值是否已经是正确的值,因为它会节省很多不必要的更新
示例(V2):
const updateTooltipShow = (chart, enabled) => {
chart.options.tooltips.enabled = enabled;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: "rgba(153,255,51,0.6)"
},
]
},
options: {
onHover: function(e, activeElements) {
const {
bottom,
top,
right,
left
} = this.chartArea;
if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
updateTooltipShow(this, true)
} else {
updateTooltipShow(this, false)
}
},
tooltips: {
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
示例(V3):
const updateTooltipShow = (chart, enabled) => {
chart.options.plugins.tooltip.enabled = enabled;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: "rgba(153,255,51,0.6)"
},
]
},
options: {
onHover: (e, activeElements, chart) => {
const {
bottom,
top,
right,
left
} = chart.chartArea;
if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
updateTooltipShow(chart, true)
} else {
updateTooltipShow(chart, false)
}
},
plugins: {
tooltip: {
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
}
});
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
我编写了一个简单的插件,用于在您将光标移出主菜单时隐藏标题 canvas:
plugins: [{
id: "toolbarHider",
afterEvent: (chart: any, evt: any, opts: any) => {
const { left, right, bottom, top } = chart.chartArea;
const e = evt.event;
const status = e.x >= left && e.x <= right && e.y <= bottom && e.y >= top;
if (status !== chart.options.plugins.tooltip.enabled) {
chart.options.plugins.tooltip.enabled = status;
chart.update();
}
}
}]
更多关于 Chart.js plugins。