it-swarm.asia

تغيير حجم الرسم البياني قماش

في ( Android WebView HTML5 canvas error ) نشرتُ سؤالًا حول رسم الرسوم البيانية باستخدام مكتبة Graph.js. المشكلة الآن هي أنه إذا قمت بالاتصال بالوظيفة لرسم الرسم البياني عدة مرات ، فإن حجم اللوحة القماشية يتم تغيير حجمها في كل مرة. في كل مرة يتم إعادة رسم الرسم البياني إلى نفس اللوحة ، يتغير حجمها أيضًا. كما أنني حاولت تحديد حجم اللوحة القماشية ولكن بدون نجاح.

ماذا قد يكون السبب؟ لماذا تغيير حجم القماش في كل مرة؟

77
Jaka

لقد واجهت الكثير من المشاكل في ذلك ، لأنه بعد كل ذلك بدا الرسم الخطي فظيعًا عند تحريك الماوس ووجدت طريقة أبسط للقيام بذلك ، آمل أن يساعدك :)

استخدم خيارات Chart.js هذه:

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,
155
NoFlag

ما يحدث هو أن Chart.js يضاعف حجم اللوحة القماشية عندما يتم تسميته ثم يحاول تغيير حجمه باستخدام CSS ، والغرض منه هو توفير رسوم بيانية عالية الدقة للأجهزة عالية الدقة في البوصة.

تكمن المشكلة في أنها لا تدرك أنها قد فعلت ذلك بالفعل ، لذلك عندما تُسمى الأوقات المتتالية ، فإنها تتضاعف حجمها بالفعل (المضاعف أو أيا كان) حتى تبدأ الأمور في الانهيار. (ما يحدث فعليًا هو التحقق مما إذا كان يجب إضافة مزيد من وحدات البكسل إلى اللوحة القماشية عن طريق تغيير سمة DOM للعرض والارتفاع ، وإذا كان ينبغي ذلك ، ضربها بعامل ما ، عادةً 2 ، ثم تغيير ذلك ، ثم تغيير نمط css السمة للحفاظ على نفس الحجم على الصفحة.)

على سبيل المثال ، عندما تقوم بتشغيلها مرة واحدة ويتم ضبط عرض قماشك وارتفاعه على 300 ، فإنه يعينهم إلى 600 ، ثم يغير سمة النمط إلى 300 ... ولكن إذا قمت بتشغيلها مرة أخرى ، فسيشهد عرض DOM وارتفاعه 600 (تحقق من الإجابة الأخرى على هذا السؤال لمعرفة السبب) ثم قم بتعيينها على 1200 وعرض CSS والارتفاع إلى 600.

ليس الحل الأكثر أناقة ، لكنني حللت هذه المشكلة مع الحفاظ على الدقة المحسنة لأجهزة شبكية العين ببساطة عن طريق تحديد عرض وارتفاع قماش يدويا قبل كل مكالمة متتابعة إلى Chart.js

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
61
jcmiller11

هذا يعمل لي:

<body>
    <form>
        [...]
        <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
            <canvas id="cv_values"></canvas>

            <script type="text/javascript">
                var indicatedValueData = {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            [...]
                        };

                var cv_values = document.getElementById("cv_values").getContext("2d");
                var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
            </script>
        </div>
    </form>
</body>

الحقيقة الأساسية هي أنه يتعين علينا تعيين حجم اللوحة في علامة div.

23
Patrick Pirzer

في IOS وأندرويد ، يخفي المتصفح شريط الأدوات عندما تقوم بالتمرير ، مما يؤدي إلى تغيير حجم النافذة التي تؤدي إلى ظهور مخططات لتغيير حجم الرسم البياني. الحل هو الحفاظ على نسبة الارتفاع.

var options = { 
    responsive: true,
    maintainAspectRatio: true
}

هذا يجب ان يحل مشكلتك.

17
Pradeep Rajashekar

كما اقترح jcmiller11 ، يساعد تحديد العرض والارتفاع. حل أجمل قليلاً هو استرداد عرض وارتفاع قماش قبل رسم المخطط. ثم استخدم هذه الأرقام لإعداد المخطط على كل إعادة رسم لاحقة للمخطط. هذا يضمن عدم وجود ثوابت في كود جافا سكريبت.

ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;

function drawchart() {
    ctx.canvas.width = ctx.canvas.originalwidth;
    ctx.canvas.height = ctx.canvas.originalheight;

    var chartctx = new Chart(ctx);
    myNewBarChart = chartctx.Bar(data, chartSettings); 
}
6
Anon

اضطررت لاستخدام مزيج من الإجابات المتعددة هنا مع بعض التعديلات الطفيفة.

أولاً ، من الضروري أن تقوم بلف عنصر قماش داخل حاوية على مستوى الكتلة. أقول لك ، افعل لا دع عنصر قماش لديه أي أشقاء. فليكن طفلاً وحيدًا ، لأنه عنيد و مدلل . (قد لا يحتاج الغلاف إلى أي قيود تحديد حجم عليها ، ولكن من أجل السلامة ، قد يكون من الجيد أن يكون هناك ارتفاع أقصى مطبق عليه.)

بعد التأكد من استيفاء الشروط السابقة ، تأكد من استخدام الخيارات التالية عند بدء الرسم البياني:

var options = { 
    "responsive": true,
    "maintainAspectRatio": false
}

إذا كنت تريد ضبط ارتفاع المخطط ، فقم بذلك على مستوى عنصر الرسم.

<canvas height="500"></canvas>

لا تحاول التعامل مع الطفل بأي طريقة أخرى. يجب أن ينتج عن هذا مخططًا مُرضيًا ومخططًا بشكل صحيح ، ويظل في سريره بهدوء.

4
truefusion

واجهت مشكلة مماثلة ووجدت إجابتك .. توصلت في النهاية إلى حل.

يبدو أن مصدر Chart.js يحتوي على ما يلي (من المفترض أنه لا يُفترض إعادة عرضه ورسم بياني مختلف تمامًا في نفس اللوحة القماشية):

    //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicePixelRatio) {
    context.canvas.style.width = width + "px";
    context.canvas.style.height = height + "px";
    context.canvas.height = height * window.devicePixelRatio;
    context.canvas.width = width * window.devicePixelRatio;
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
}

هذا أمر جيد إذا تم استدعاؤه مرة واحدة ، ولكن عند إعادة الرسم عدة مرات ، ينتهي بك الأمر تغيير حجم عنصر DOM قماش عدة مرات مما تسبب في إعادة الحجم.

امل ان يساعد!

3
yahfree

حاولت تغيير حجم Canvas باستخدام مسج ولكن لا يعمل بشكل جيد. أعتقدCSS3هو الخيار الأفضل الذي يمكنك تجربته ، إذا كنت ترغب في التكبير/التصغير فوق مستوى معين.

بعد خيار التحويم من رابط codepan الآخر:

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

اتبع رابط codepan الخاص بي:

https://codepen.io/hitman0775/pen/XZZzqN

1
Hiten Patel

إذا كان أي شخص يواجه مشاكل ، فقد وجدت حلاً لا ينطوي على التضحية بالاستجابة وما إلى ذلك.

ببساطة لف قماشك في حاوية div (بدون تصميم) وأعد ضبط محتويات div على لوحة قماش فارغة مع معرف قبل استدعاء مُنشئ الرسم البياني.

مثال:

HTML:

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

JS:

$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual
1
fpscolin

كان لدي نفس النوع من مشكلة القياس باستخدام Angular CLI. كان قادراً على تشغيله عن طريق إزالة هذا الخط من index.html:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

ثم في ملف angular-cli.json ، في قسم البرامج النصية ، استخدم هذا:

"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]

المصدر : mikebarr58

0
Wouter Vanherck