javascript - 视网膜显示屏上的 Chartjs v2 存在标签大小问题(文本太大)

Question

我正在使用chart.js最新的 v2.7.1 版本。我关注了这个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 轴标签非常大，并且也显示为截止，就好像未完全渲染一样。在非视网膜屏幕上的相同 View 看起来不错。对于 Retina 屏幕上的尺寸问题，是否有任何 js/css 解决方法或任何特定的 Chart.js 解决方法？

(归功于此 stackoverflow 帖子 the code snippet )

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