ChartJS 鼠标悬停在图表js上时绘制水平和垂直线

bbmckpt7  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(215)

我在创建折线图时遇到了一个关于图表js的问题。我想创建一个具有指定数据的图表,并且在悬停在交叉点时还需要有水平线和垂直线。我可以在悬停时创建垂直线,但找不到任何可以绘制这两条线的解决方案。下面是我在悬停时绘制垂直线的代码。

window.lineOnHover = function(){        
        Chart.defaults.LineWithLine = Chart.defaults.line;
        Chart.controllers.LineWithLine = Chart.controllers.line.extend({
        draw: function(ease) {
          Chart.controllers.line.prototype.draw.call(this, ease);

          if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
             var activePoint = this.chart.tooltip._active[0],
                 ctx = this.chart.ctx,
                 x = activePoint.tooltipPosition().x,
                 topY = this.chart.legend.bottom,
                 bottomY = this.chart.chartArea.bottom;

             // draw line
             ctx.save();
             ctx.beginPath();
             ctx.moveTo(x, topY);
             ctx.lineTo(x, bottomY);
             ctx.lineWidth = 1;
             ctx.setLineDash([3,3]);
             ctx.strokeStyle = '#FF4949';
             ctx.stroke();
             ctx.restore();
          }
        }
        });
    }

//create chart
var backhaul_wan_mos_chart = new Chart(backhaul_wan_mos_chart, {
    type: 'LineWithLine',
    data: {
        labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7', 'Aug 8'],
        datasets: [{
                label: 'Series 1',
                data: [15, 16, 17, 18, 16, 18, 17, 14, 19, 16, 15, 15, 17],
                pointRadius: 0,
                fill: false,
                borderDash: [3, 3],
                borderColor: '#0F1731',
//                    backgroundColor: '#FF9CE9',
//                    pointBackgroundColor: ['#FB7BDF'],
                borderWidth: 1
            }],
//                lineAtIndex: 2,
    },
    options: {
        tooltips: {
            intersect: false
        },
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                    gridLines: {
                        offsetGridLines: true
                    },
                    ticks: {
                        fontColor: '#878B98',
                        fontStyle: "600",
                        fontSize: 10,
                        fontFamily: "Poppins"
                    }
                }],
            yAxes: [{
                    display: true,
                    stacked: true,
                    ticks: {
                        min: 0,
                        max: 50,
                        stepSize: 10,
                        fontColor: '#878B98',
                        fontStyle: "500",
                        fontSize: 10,
                        fontFamily: "Poppins"
                    }
                }]
        },
        responsive: true,
    }
});

我的代码输出如下:WAN MoS分数图--x1c 0d1x
因此,当我悬停在相交(绘制)点上时,我希望有一条水平线与同一条垂直线在一起。
请帮助我的人..提前感谢。

kcrjzv8t

kcrjzv8t1#

您只需为从工具提示中获取的y坐标添加第二个绘制块,首先移动到chartArea的左侧,您可以通过获取底部和顶部的相同方式获取该坐标,然后在相同的Y轴上向右移动
第一个

编辑:

你应该使用一个自定义的插件,因为你不画每次你移动光标,你可以通过使用一个自定义的插件强制这一点:
第一个

编辑:

更新了v3的答案
第一个

bqf10yzr

bqf10yzr2#

我在我的一个项目的 * 上一个 * 版本中已经完全做到了这一点(但只有垂直线)。不幸的是,这个功能已经被删除,但旧的源代码文件仍然可以通过我的github访问。
关键是这段代码:

Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
   draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x,
             topY = this.chart.legend.bottom,
             bottomY = this.chart.chartArea.bottom;

         // draw line
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 0.5;
         ctx.strokeStyle = '#A6A6A6';
         ctx.stroke();
         ctx.restore();
      }
   }
});

另一个警告是,上述代码适用于Chart.js 2.8,我知道Chart.js的当前版本是3.1。我还没有阅读关于更新的官方手册,但我个人的经验是,这个更新不是100%向后兼容-所以不确定如果您需要Chart.js 3,它是否仍然有效。(当然,你可以先试试2.8,如果它能用,你就可以调整代码,让它在3.1上工作)

相关问题