视网膜显示屏上的 Chartjs v2 存在标签大小问题（文本太大）

Question

我正在使用 chart.js with the latest v2.7.1 release. I followed this jsfiddle 示例在滚动时创建固定的 Y 轴效果。它运行良好，但 Retina 显示屏（iPhone、Macbook 等）存在一个问题。

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

如果您在 Retina 屏幕上查看代码片段（并等待 5 秒以触发滚动），Y 轴标签非常大，并且还出现截断，就好像它没有完全呈现一样。非视网膜屏幕上的相同视图看起来不错。是否有任何 js/css 解决 Retina 屏幕尺寸问题的解决方法或任何特定的 chart.js 解决方法？

（感谢此 Whosebug post ）

Answer 1

我也运行遇到了这个问题，原来的fiddle效果很好，只是没有响应。

关键是原来的fiddle并没有像使用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);

视网膜显示屏上的 Chartjs v2 存在标签大小问题（文本太大）

Chartjs v2 on retina display has label size issue (text is too large)

javascript

chart.js

retina-display