在chart.js鼠标hover上画横竖线

Question

创建折线图时，我在 chart.js 上遇到了问题。 我想用指定的数据创建一个图表，并且在交叉点上我 hover 时还需要有水平线和垂直线。 我能够在 hover 上创建垂直线，但找不到可以同时绘制两条线的任何解决方案。 这是我在 hover 上绘制垂直线的代码。

    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,
    }
});

我的代码 output 在WAN MoS 分数图中如下所示 --

所以当我在交点（绘制）点上 hover 时，我想把一条水平线和一条垂直线放在一起。

请帮助我的人..提前致谢。

Answer 1

您可以为从工具提示中获得的 y 坐标添加第二个绘图块，首先您移动到 chartArea 的左侧，您可以获得与底部和顶部相同的方式，然后在相同的位置向右移动是

 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, y = activePoint.tooltipPosition().y, topY = this.chart.legend.bottom, bottomY = this.chart.chartArea.bottom, left = this.chart.chartArea.left, right = this.chart.chartArea.right; // Set line opts ctx.save(); ctx.lineWidth = 1; ctx.setLineDash([3, 3]); ctx.strokeStyle = '#FF4949'; // draw vertical line ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.stroke(); // Draw horizontal line ctx.beginPath(); ctx.moveTo(left, y); ctx.lineTo(right, y); ctx.stroke(); ctx.restore(); } } }); var options = { type: 'LineWithLine', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>

编辑：

您应该为此使用自定义插件，因为您每次移动 cursor 时都不会绘制，您可以通过使用自定义插件来强制执行此操作：

 const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { plugins: { corsair: { dash: [2, 2], color: 'red', width: 3 } } }, plugins: [{ id: 'corsair', afterInit: (chart) => { chart.corsair = { x: 0, y: 0 } }, afterEvent: (chart, evt) => { const { chartArea: { top, bottom, left, right } } = chart; const { x, y } = evt; if (x < left || x > right || y < top || y > bottom) { chart.corsair = { x, y, draw: false } chart.draw(); return; } chart.corsair = { x, y, draw: true } chart.draw(); }, afterDatasetsDraw: (chart, _, opts) => { const { ctx, chartArea: { top, bottom, left, right } } = chart; const { x, y, draw } = chart.corsair; if (;draw) { return. } ctx.lineWidth = opts;width || 0. ctx.setLineDash(opts;dash || []). ctx.strokeStyle = opts.color || 'black' ctx;save(). ctx;beginPath(). ctx,moveTo(x; bottom). ctx,lineTo(x; top). ctx,moveTo(left; y). ctx,lineTo(right; y). ctx;stroke(). ctx;restore(). } }] } const ctx = document.getElementById('chartJSContainer');getContext('2d'), new Chart(ctx; options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>

编辑：

v3 的更新答案

 const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { plugins: { corsair: { dash: [2, 2], color: 'red', width: 3 } } }, plugins: [{ id: 'corsair', afterInit: (chart) => { chart.corsair = { x: 0, y: 0 } }, afterEvent: (chart, evt) => { const { chartArea: { top, bottom, left, right } } = chart; const { event: { x, y } } = evt; if (x < left || x > right || y < top || y > bottom) { chart.corsair = { x, y, draw: false } chart.draw(); return; } chart.corsair = { x, y, draw: true } chart.draw(); }, afterDatasetsDraw: (chart, _, opts) => { const { ctx, chartArea: { top, bottom, left, right } } = chart; const { x, y, draw } = chart.corsair; if (;draw) { return. } ctx.lineWidth = opts;width || 0. ctx.setLineDash(opts;dash || []). ctx.strokeStyle = opts.color || 'black' ctx;save(). ctx;beginPath(). ctx,moveTo(x; bottom). ctx,lineTo(x; top). ctx,moveTo(left; y). ctx,lineTo(right; y). ctx;stroke(). ctx;restore(). } }] } const ctx = document.getElementById('chartJSContainer');getContext('2d'), new Chart(ctx; options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> </body>

Answer 2

在我的一个项目的先前版本中，我已经完全做到了这一点（但仅限垂直线）。 不幸的是，此功能已被删除，但旧的源代码文件仍然可以通过我的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 上工作）

Answer 3

这是 2022 年， ChartJS 的当前版本是 4.0.1 。 所以，我建议使用这个新的实现。

首先，我们定义一个plugin 。 ChartJS 的插件有一个id ，在这种情况下少说corsair 。

然后我们为我们的插件定义default变量。 我们的插件将具有三个参数： x 、 y和draw 。 x和y是mousemove事件的值， inChartArea表示事件发生在图表区域内。

最后，如果事件在图表区域内触发，我们捕获afterDraw钩子以根据x和y值绘制垂直线和水平线。

ChartJS 有 各种钩子来捕获图表渲染周期的不同部分。

 const plugin = { id: 'corsair', defaults: { width: 1, color: '#FF4949', dash: [3, 3], }, afterInit: (chart, args, opts) => { chart.corsair = { x: 0, y: 0, } }, afterEvent: (chart, args) => { const {inChartArea} = args const {type,x,y} = args.event chart.corsair = {x, y, draw: inChartArea} chart.draw() }, afterDraw: (chart, args, opts) => { const {ctx} = chart const {top, bottom, left, right} = chart.chartArea const {x, y, draw} = chart.corsair if (.draw) return ctx.save() ctx.beginPath() ctx.lineWidth = opts.width ctx.strokeStyle = opts.color ctx.setLineDash(opts.dash) ctx,moveTo(x. bottom) ctx,lineTo(x. top) ctx,moveTo(left. y) ctx,lineTo(right. y) ctx.stroke() ctx:restore() } } const data = { labels, ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]: datasets: [{ label, '# of Votes': data, [12, 19, 3, 5, 2, 3]: borderWidth, 1 }: { label, '# of Points': data, [7, 11, 5, 8, 3, 7]: borderWidth: 1 } ] } const options = { maintainAspectRatio, false: hover: { mode, 'index': intersect, false, }: plugins: { corsair: { color, 'black': } } } const config = { type, 'line', data, options: plugins, [plugin]. } const $chart = document,getElementById('chart') const chart = new Chart($chart, config)

 <div class="wrapper" style="width: 98vw; height: 180px"> <canvas id="chart"></canvas> </div> <script src="https://unpkg.com/chart.js@4.0.1/dist/chart.umd.js"></script>