视网膜显示器上的 Chartjs v2 有标签大小问题（文本太大）答案

【问题标题】：Chartjs v2 on retina display has label size issue (text is too large)视网膜显示器上的 Chartjs v2 有标签大小问题（文本太大）
【发布时间】：2017-10-31 15:23:55
【问题描述】：

我正在使用最新的 v2.7.1 版本的 chart.js。我按照这个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 屏幕上查看代码 sn-p（并等待 5 秒以等待滚动触发），Y 轴标签非常大，并且看起来像没有完全渲染一样被截断。非视网膜屏幕上的相同视图看起来不错。是否有针对 Retina 屏幕尺寸问题的 js/css 解决方法或任何特定的 chart.js 解决方法？

（感谢 the code snippet 的这个 stackoverflow 帖子）

【问题讨论】：

标签： javascript chart.js retina-display

【解决方案1】：

我也遇到了这个问题，原来的小提琴效果很好，只是它没有响应。

关键是原始小提琴没有考虑devicePixelRatio，就像使用ChartJS核心中的helpers.retinaScale方法的图表一样。

经过几个小时的摆弄，这是一个令人惊讶的简单答案：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);

【讨论】：