视网膜显示屏上的Chartjs v2存在标签大小问题（文本太大） [英] Chartjs v2 on retina display has label size issue (text is too large)
问题描述
我在最新的v2.7.1版本中使用 chart.js 。我遵循了这个 jsfiddle 示例，用于在滚动时创建固定的Y轴效果。它运作良好，但Retina显示器（iPhone，Macbook等）存在一个问题。
var ctx = document.getElementById（ myChart）。getContext（ 2d）； var chart = {选项：{响应性：true，maintainAspectRatio：false，动画：{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）; }}}，键入：'bar'，数据：{标签：[ January， February， March， April， May， June， July]，数据集：[{标签：我的第一个数据集，fillColor： rgba（220,220,220,1），strokeColor： rgba（220,220,220,1），pointColor： rgba（220,220,220,1），pointStrokeColor：＃fff，pointHighlightFill： #fff，pointHighlightStroke： rgba（220,220,220,1），数据：[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 {位置：相对； } .chartWrapper>画布{位置：绝对；左：0；最高：0;指针事件：无； } .chartAreaWrapper {overflow-x：滚动；职位：相对宽度：100％; } .chartAreaWrapper2 {位置：相对；高度：300像素； }
< 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秒钟以进行滚动触发），在Retina屏幕上，Y轴标签非常大，并且看起来好像没有完全渲染一样会被截断。在非视网膜屏幕上的相同视图看起来不错。在视网膜屏幕上是否存在任何大小调整问题的js / css解决方法或任何特定的chart.js解决方法？
（对此stackoverflow帖子的信用为代码段）
我也遇到了这个问题，最初的小提琴运作良好，只是它没有响应。 p>
关键是原始小提琴未将 devicePixelRatio 纳入考虑范围，与使用<$的图表相同ChartJS核心中的c $ c> 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 ）;
I'm using chart.js with the latest v2.7.1 release. I followed this jsfiddle example for creating a fixed Y-Axis effect when scrolling. It works great but there is one issue with Retina displays (iPhones, Macbooks, etc).
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>
If you view the code snippet (and wait the 5 seconds for a scroll trigger) on Retina screen, the Y-axis labels are very large, and also appear cut-off as if it wasn't completely rendered. The same view on a non-retina screen looks fine. Are there any js/css workarounds for the sizing issue on Retina screens or any specific chart.js workarounds?
(Credit to this stackoverflow post for the code snippet)
I also ran into this issue, the original fiddle works well except that it is not responsive.
The key is that the original fiddle does not take into account the devicePixelRatio the same way as the chart using the helpers.retinaScale method from ChartJS core.
After several hours of fiddling, here is the surprisingly simple answer: https://jsfiddle.net/4ydfo4xo/
When copying the scales from the original chart, the devicePixelRatio must be applied to the sourceWidth and sourceHeight arguments of drawImage
Specifically the pixel ratio is accessed using
var pixelRatio = myLiveChart.chart.currentDevicePixelRatio;
and then the drawImage arguments are changed..
targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * pixelRatio, copyHeight * pixelRatio, 0, 0, copyWidth, copyHeight);
这篇关于视网膜显示屏上的Chartjs v2存在标签大小问题（文本太大）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
