小编PHP*_*eek的帖子

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

我在创建折线图时遇到了图表 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 …
Run Code Online (Sandbox Code Playgroud)

javascript php graph linechart chart.js

12
推荐指数
2
解决办法
1万
查看次数

标签 统计

chart.js ×1

graph ×1

javascript ×1

linechart ×1

php ×1