網膜ディスプレイのChartjs v2にラベルサイズの問題があります（テキストが大きすぎます）

Question

最新のv2.7.1リリースでchart.jsを使用しています。スクロールするときに固定のY軸エフェクトを作成する例をこのjsfiddleの例に従いました。素晴らしいですが、Retinaディスプレイ（iPhone、MacBookなど）には1つの問題があります。

var ctx = document.getElementById("myChart").getContext("2d"); 
 

 
     var chart = { 
 
     options: { 
 
      responsive: true, 
 
      maintainAspectRatio: false, 
 
      animation: { 
 
        
 
        onComplete: function(animation) { 
 
         var sourceCanvas = myLiveChart.chart.canvas; 
 
         var copyWidth = myLiveChart.scales['y-axis-0'].width - 10; 
 
         var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10; 
 
         var targetCtx = document.getElementById("myChartAxis").getContext("2d"); 
 
         targetCtx.canvas.width = copyWidth; 
 
       targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight); 
 
        } 
 
       } 
 
     }, 
 
     type: 'bar', 
 
     data: { 
 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
      datasets: [ 
 
       { 
 
        label: "My First dataset", 
 
        fillColor: "rgba(220,220,220,0.2)", 
 
        strokeColor: "rgba(220,220,220,1)", 
 
        pointColor: "rgba(220,220,220,1)", 
 
        pointStrokeColor: "#fff", 
 
        pointHighlightFill: "#fff", 
 
        pointHighlightStroke: "rgba(220,220,220,1)", 
 
        data: [65, 59, 80, 81, 56, 55, 40] 
 
       } 
 
      ] 
 
     }}; 
 

 
    var myLiveChart = new Chart(ctx, chart); 
 

 
setInterval(function() { 
 
    myLiveChart.data.datasets[0].data.push(Math.random() * 100); 
 
\t myLiveChart.data.labels.push("Test"); 
 
    var newwidth = $('.chartAreaWrapper2').width() +60; 
 
    $('.chartAreaWrapper2').width(newwidth); 
 
    $('.chartAreaWrapper').animate({scrollLeft:newwidth}); 
 
    
 
    }, 5000);

.chartWrapper { 
 
      position: relative; 
 
      
 
     } 
 

 
     .chartWrapper > canvas { 
 
      position: absolute; 
 
      left: 0; 
 
      top: 0; 
 
      pointer-events:none; 
 
     } 
 
.chartAreaWrapper { 
 
      overflow-x: scroll; 
 
      position: relative; 
 
      width: 100%; 
 
     } 
 

 
     .chartAreaWrapper2 { 
 
      
 
      position: relative; 
 
      height: 300px; 
 
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
 
<div class="chartWrapper"> 
 
     <div class="chartAreaWrapper"> 
 
     <div class="chartAreaWrapper2"> 
 
      <canvas id="myChart"></canvas> 
 
     </div> 
 
     </div> 
 
     
 
     <canvas id="myChartAxis" height="300" width="0"></canvas> 
 
    </div>

あなたは網膜画面上（およびスクロールトリガを5秒待つ）コードスニペットを表示すると、Y軸のラベルは非常に大きく、また、カットオフとして表示されますそれが完全にレンダリングされていない場合。非網膜スクリーン上の同じビューは上手く見える。網膜スクリーンのサイジングの問題や特定のchart.jsの回避策に関するjs/cssの回避策はありますか？

（the code snippetため、このstackoverflowの記事へクレジット）

Answer 1

私もこの問題に遭遇した、オリジナルのフィドルは、それが応答しないことを除いてうまく動作します。

重要な点は、オリジナルのフィドルでは、ChartJSコアのhelpers.retinaScaleメソッドを使用しているチャートと同じ方法で、devicePixelRatioを考慮していないということです。 https://jsfiddle.net/4ydfo4xo/

オリジナルのチャートから鱗をコピーし、devicePixelRatioは、具体的に

drawImageのsourceWidthとsourceHeight引数に適用する必要があります。いじるの数時間後

は、ここでは驚くほど単純な答えであります画素率が

var pixelRatio = myLiveChart.chart.currentDevicePixelRatio; 

を使用してアクセスされ、次いでdrawImage引数が変更された..

targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * pixelRatio, copyHeight * pixelRatio, 0, 0, copyWidth, copyHeight);