ポイントをホバーすると、Chart.jsに縦線を追加するにはどうすればよいですか？

Question

私はChart.jsを使ってグラフを作成しました。水平軸と垂直軸にいくつかの通貨価値を表示します。私は多くのポイントを追加し、それらをサークルとして表示します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> 
 
<div class="container" style="width: 100%;margin-top:30px;"> 
 
    <canvas id="myChart"></canvas> 
 
</div> 
 
<script> 
 
\t let zzz = document.getElementById('myChart').getContext('2d'); 
 

 
    // Global Options 
 
    Chart.defaults.global.defaultFontFamily = 'Arial'; 
 
    Chart.defaults.global.defaultFontSize = 16; 
 
    Chart.defaults.global.defaultFontColor = '#000'; 
 

 

 
    let massPopChart = new Chart(zzz, { 
 
     type:'line', 
 
     data:{ 
 
     labels:[ 
 
\t \t '20/09/2017', 
 
\t \t '20/10/2017', 
 
\t \t '20/11/2017', 
 
\t \t '20/12/2017' 
 
\t \t ], 
 
     datasets:[{ 
 
      label:'US Dollar', 
 
\t \t fill: false, 
 
\t \t lineTension: 0, 
 
      data:[ 
 
      123, 
 
      143, 
 
      156, 
 
      122 
 
      ], 
 
\t \t pointBackgroundColor: '#f90', 
 
\t \t pointHoverBackgroundColor: '#fff', 
 
      //backgroundColor:'green', 
 
      backgroundColor:[ 
 
      '#2277bb', 
 
      '#2277bb', 
 
      '#2277bb', 
 
      '#000000', 
 
      ], 
 
      borderWidth:3, 
 
      borderColor:'#f90', 
 
      hoverBorderWidth:3, 
 
      hoverBorderColor:'#fff' 
 
     }] 
 
     }, 
 
     options:{ 
 
     title:{ 
 
      display:true, 
 
      text:'Chart 1', 
 
      fontSize:16 
 
     }, 
 
     legend:{ 
 
      display:true, 
 
      position:'top', 
 
      labels:{ 
 
      fontColor:'#000' 
 
      } 
 
     }, 
 
     layout:{ 
 
      padding:{ 
 
      left:50, 
 
      right:0, 
 
      bottom:0, 
 
      top:0 
 
      } 
 
     }, 
 
     tooltips:{ 
 
      enabled:true, 
 
     }, 
 
\t \t scales: { 
 
\t \t \t yAxes: [{ 
 
\t \t \t \t ticks: { 
 
\t \t \t \t \t beginAtZero: true 
 
\t \t \t \t } 
 
\t \t \t }] 
 
\t \t }, 
 
\t \t elements: { 
 
\t \t \t point: { 
 
\t \t \t \t radius: 5 
 
\t \t \t } 
 
\t \t }, 
 
\t \t 
 
\t \t 
 
\t \t 
 
     } 
 
    }); 
 
    </script>

そして、どのようにすることができます

Screenshot

そして、ここに私のチャートのコードです：私はこのような点についてホバー時にポイントの垂直線を追加したいです私は上記の例のように私のグラフに行を追加しますか？

Answer 1

私が見つけたanother questionは、あなたが望む解決方法を示しています。私はこれが役立つことを願っています

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.scales['y-axis-0'].top, 
 
       bottomY = this.chart.scales['y-axis-0'].bottom; 
 

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

 
Chart.defaults.global.defaultFontFamily = 'Arial'; 
 
Chart.defaults.global.defaultFontSize = 16; 
 
Chart.defaults.global.defaultFontColor = '#000'; 
 

 
var chart = new Chart("myChart", { 
 
    type: 'LineWithLine', 
 
    data: { 
 
     labels: ['20/09/2017', 
 
      '20/10/2017', 
 
      '20/11/2017', 
 
      '20/12/2017' 
 
     ], 
 
     datasets: [{ 
 
      label: 'US Dollar', 
 
      fill: false, 
 
      lineTension: 0, 
 
      data: [123, 143, 156, 122], 
 
      pointBackgroundColor: '#f90', 
 
      pointHoverBackgroundColor: '#fff', 
 
      //backgroundColor:'green', 
 
      backgroundColor: ['#2277bb', '#2277bb', '#2277bb', '#000000', ], 
 
      borderWidth: 3, 
 
      borderColor: '#f90', 
 
      hoverBorderWidth: 3, 
 
      hoverBorderColor: '#fff' 
 
     }] 
 
    }, 
 
    options: { 
 
     title: { 
 
      display: true, 
 
      text: 'Chart 1', 
 
      fontSize: 16 
 
     }, 
 
     legend: { 
 
      display: true, 
 
      position: 'top', 
 
      labels: { 
 
       fontColor: '#000' 
 
      } 
 
     }, 
 
     layout: { 
 
      padding: { 
 
       left: 50, 
 
       right: 0, 
 
       bottom: 0, 
 
       top: 0 
 
      } 
 
     }, 
 
     tooltips: { 
 
      enabled: true, 
 
      intersect: false 
 
     }, 
 
     elements: { 
 
      point: { 
 
       radius: 5 
 
      } 
 
     }, 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true 
 
       } 
 
      }] 
 
     }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" style="width: 100%;margin-top:30px;"> 
 
    <canvas id="myChart"></canvas> 
 
</div>