chart.js 相关问题

我正在使用 Chart.js 4.4.0 创建一个具有类似于 Flot.js 十字线插件的十字线效果的图表。按照此 YouTube 指南，我生成了以下示例代码：我正在使用 Chart.js 4.4.0 创建一个带有十字准线效果的图表，类似于 Flot.js crosshair 插件。按照此 YouTube 指南，我生成了以下示例代码： <html> <head> <script type="text/javascript" src="../include/chart-4.4.0.umd.js"></script> </head> <body> <div id="chart_container" class="plot" style="width:50%;"> <div> <canvas id="myChart"></canvas> </div> </div> <script> /* The Chart.js context */ const ctx = document.getElementById('myChart'); /* The Chart container node, used for crosshair */ let container = document.getElementById('chart_container'); let chart_data = { datasets: [{ data: [{x:0, y:1}, {x:1, y:1}, {x:1, y:2}, {x:2, y:2}, {x:2, y:3}, {x:3, y:3}, {x:3, y:1}, {x:4, y:1}], borderWidth: 3, /* For the crosshair to work, we must disable other * tooltip hover effects: */ pointHoverRadius: 0, pointHitRadius: 0, pointRadius: 0 }] }; /* Chart.js chart options object for the Chart.js * constructor, defined below. */ let chart_options = { showLine: true, pointStyle: false, borderColor: 'rgba(255,204,0,1)', borderWidth: 1, fill: '+1', scales: { y: {beginAtZero: true} }, }; /* Create the Chart.js chart */ let cjs_plot = new Chart(ctx, { type: 'scatter', data: chart_data, options: chart_options, }); /* Implementing the crosshair effect previously done * using the Flot.js 'crosshair' plugin. */ /* https://www.youtube.com/watch?v=za2cQFObvWQ */ container.addEventListener('mousemove', (e) => { crosshair(cjs_plot, e); }) function crosshair(chart, mousemove) { /* Setting `update` to 'none' means the refresh is * invisible so that we don't see previous crosshair * lines as the mousemoves. */ chart.update('none'); //console.log(mousemove); const x = mousemove.offsetX; const y = mousemove.offsetY; const { ctx, chartArea: {top, bottom, left, right, width, height} } = chart; ctx.save(); /* Draw items */ /* rgba(255,0,0,1) is solid red */ ctx.strokeStyle = 'rgba(255,0,0,1)'; ctx.lineWidth = 1; /* Only draw crosshairs if mouse is inside the chart area. * Remember 'y' is measured top-down. */ if(x >= left && x <= right && y >= top && y <= bottom) { /* Draw horizontal line */ ctx.beginPath(); ctx.moveTo(left, y); ctx.lineTo(right, y); ctx.stroke(); ctx.closePath(); /* Draw vertical line */ ctx.beginPath(); ctx.moveTo(x, top); ctx.lineTo(x, bottom); ctx.stroke(); ctx.closePath(); } ctx.restore(); } // End of crosshair() function </script> </body> </html> 当用户将鼠标悬停在图表上时，这会成功创建十字准线。问题是，如果我将鼠标指针快速移出图表，线条并不总是按应有的方式消失。它们只是卡在我将鼠标移出的边缘附近。这种情况并不总是发生，当我慢慢越过边缘时，它几乎不会发生。如果光标移动得太快，代码几乎无法“注册”光标已超出其边界。这个问题描述了类似的问题，但提供的唯一解决方案是将侦听器附加到图表的包含节点，而不是图表本身或 HTML <body>。我已经在这么做了。这个答案也解决了问题，但仅提供了如何解决问题的一般描述。我将开始尝试这个建议，但我预计这需要一两周的努力，所以我在这里发帖，希望有人能同时发布更好的解决方案或工作代码。（这个答案已经超过 13 年了，所以现在有理由希望有更好的解决方案）。如何调整上述代码以保证只要指针位于图表区域之外，无论指针移动的速度如何，十字准线都会消失？要删除十字线，您的方法依赖于在图表容器内部但在 mousemove 外部注册 chartArea 事件，因此 if 条件 (x >= left && x <= right && y >= top && y <= bottom) 变为 false。这是一个非常小的边界，可能会发生这种情况，这就是为什么很容易被（不是非常）快速的鼠标移动跳过。删除十字线的正确方法是同时为 mouseleave 注册一个处理程序： container.addEventListener('mouseout', (e) => { cjs_plot.update('none') }); 这是添加了该内容的代码片段 /* The Chart.js context */ const ctx = document.getElementById('myChart'); /* The Chart container node, used for crosshair */ let container = document.getElementById('chart_container'); let chart_data = { datasets: [{ data: [{x:0, y:1}, {x:1, y:1}, {x:1, y:2}, {x:2, y:2}, {x:2, y:3}, {x:3, y:3}, {x:3, y:1}, {x:4, y:1}], borderWidth: 3, /* For the crosshair to work, we must disable other * tooltip hover effects: */ pointHoverRadius: 0, pointHitRadius: 0, pointRadius: 0 }] }; /* Chart.js chart options object for the Chart.js * constructor, defined below. */ let chart_options = { showLine: true, pointStyle: false, borderColor: 'rgba(255,204,0,1)', borderWidth: 1, fill: '+1', scales: { y: {beginAtZero: true} }, }; /* Create the Chart.js chart */ let cjs_plot = new Chart(ctx, { type: 'scatter', data: chart_data, options: chart_options, }); /* Implementing the crosshair effect previously done * using the Flot.js 'crosshair' plugin. */ /* https://www.youtube.com/watch?v=za2cQFObvWQ */ container.addEventListener('mousemove', (e) => { crosshair(cjs_plot, e); }) container.addEventListener('mouseout', (e) => { cjs_plot.update('none') }) function crosshair(chart, mousemove) { /* Setting `update` to 'none' means the refresh is * invisible so that we don't see previous crosshair * lines as the mousemoves. */ chart.update('none'); const x = mousemove.offsetX; const y = mousemove.offsetY; const { ctx, chartArea: {top, bottom, left, right, width, height} } = chart; ctx.save(); /* Draw items */ /* rgba(255,0,0,1) is solid red */ ctx.strokeStyle = 'rgba(255,0,0,1)'; ctx.lineWidth = 1; /* Only draw crosshairs if mouse is inside the chart area. * Remember 'y' is measured top-down. */ if(x >= left && x <= right && y >= top && y <= bottom) { /* Draw horizontal line */ ctx.beginPath(); ctx.moveTo(left, y); ctx.lineTo(right, y); ctx.stroke(); ctx.closePath(); /* Draw vertical line */ ctx.beginPath(); ctx.moveTo(x, top); ctx.lineTo(x, bottom); ctx.stroke(); ctx.closePath(); } ctx.restore(); } // End of crosshair() function <div id="chart_container" class="plot" style="width:50%;"> <div> <canvas id="myChart"></canvas> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

javascript chart.js

回答 1 投票 0

x 轴标签的条件格式（Chart.js）

如果关联的数据大于0，我想将x轴标签加粗。看起来很简单，但做不到......这是我的代码：选项： { 动画：假，尺度：{ X： { 格...

javascript chart.js

回答 1 投票 0

chart.js 相关问题

最新问题