Diagramm.js Canvas Größen Sie die Größe

Question 1

Ich hatte viele Probleme damit, denn nach all dem sah meine Linie -Grafik schrecklich aus, als die Maus schwebte und ich einen einfacheren Weg fand, um es zu tun, hoffe, dass es helfen wird :)

Verwenden Sie diese Optionen für Diagramm.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,

Question 2

Was geschieht, ist chart.js multipliziert die Größe der Leinwand, wenn sie als Versuch, sie mit CSS zurückzuführen, zu skalieren, wobei der Zweck dazu besteht, Diagramme mit höherer Auflösung für Hoch-DPI-Geräte bereitzustellen.

Das Problem ist, dass es nicht klar ist, dass es dies bereits getan hat. Wenn es also aufeinanderfolgende Zeiten bezeichnet wird, multipliziert es die bereits (verdoppelte oder was auch immer) Größe wieder, bis die Dinge zu brechen beginnen. (Was tatsächlich passiert, ist zu überprüfen Attribut zum Verwalten der gleichen Größe auf der Seite.)

Wenn Sie es beispielsweise einmal ausführen und Ihre Leinwandbreite und -höhe auf 300 eingestellt sind, setzt sie sie auf 600 und ändert dann das Style -Attribut auf 300 ... aber wenn Sie es erneut ausführen, sieht es, dass die DOM -Breite und die Höhe der DOM -Breite und -höhe festgelegt werden. sind 600 (überprüfen Sie die andere Antwort auf diese Frage, um zu sehen, warum) und setzt sie dann auf 1200 und die CSS -Breite und Höhe auf 600.

Nicht die eleganteste Lösung, aber ich habe dieses Problem gelöst und gleich

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

Question 3

Das funktioniert für mich:

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

Die wesentliche Tatsache ist, dass wir die Größe der Leinwand im Div-Tag festlegen müssen.

Question 4

In iOS und Android verbirgt der Browser die Symbolleiste beim Scrollen, wodurch die Größe des Fensters geändert wird. Die Lösung besteht darin, das Seitenverhältnis aufrechtzuerhalten.

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

Dies sollte Ihr Problem lösen.

Question 5

Ich musste hier eine Kombination aus mehreren Antworten mit einigen kleinen Änderungen verwenden.

Zuerst, es ist notwendig dass Sie das Canvas-Element in einen Block-Ebene-Behälter einwickeln. Ich sage zu dir, tue nicht Lassen Sie das Canvas -Element Geschwister haben; Lass es ein einsames Kind sein, denn es ist hartnäckig und verwöhnt. (Die Wrapper benötigt möglicherweise keine Größenbeschränkungen, die darauf eingestellt sind. Für die Sicherheit kann es jedoch gut sein, dass eine Maxhohe darauf angewendet wird.)

Stellen Sie bei der Einleitung des Diagramms sicher, dass die folgenden Optionen verwendet werden, nachdem die vorherigen Bedingungen erfüllt sind:

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

Wenn Sie die Höhe des Diagramms einstellen möchten, tun Sie dies auf der Ebene der Canvas -Elemente.

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

Versuchen Sie nicht, mit dem Kind auf andere Weise umzugehen. Dies sollte zu einer zufriedenstellend, ordnungsgemäßen Tabelle führen, die friedlich in seinem Kinderbett bleibt.

Question 6

Wie JCMiller11 vorschlug, hilft die Festlegung der Breite und der Höhe. Eine etwas schönere Lösung besteht darin, die Breite und Höhe der Leinwand vor dem Zeichnen des Diagramms abzurufen. Verwenden Sie dann diese Zahlen zum Einstellen des Diagramms auf jedem nachfolgenden Wiederieren des Diagramms. Dies stellt sicher, dass es im JavaScript -Code keine Konstanten gibt.

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

Question 7

Ich hatte ein ähnliches Problem und fand Ihre Antwort. Ich bin schließlich zu einer Lösung gekommen.

Es sieht so aus, als ob die Quelle von chart.js die folgenden hat (vermutlich, weil es in derselben Leinwand nicht wieder rendern und völlig unterschiedlich ist):

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

Dies ist in Ordnung, wenn es einmal aufgerufen wird. Wenn Sie jedoch mehrmals neu gezogen werden, ändern Sie die Größe des Leinwand-Dom-Elements mehrmals, was eine erneute Größe verursacht.

Ich hoffe, das hilft!

Question 8

Ich hatte das gleiche Problem. Ich konnte es lösen, indem ich Option einstellen:

responsive: false,
maintainAspectRatio: true,
showScale: false,

Und setzen Sie in CSS die Breite des Containers div genauso wie die Leinwand:

    #canvasContainer { 
      width: 300px;
    }
    
    canvas {
      width: 300px;
    }

Question 9

Wenn jemand Probleme hat, habe ich eine Lösung gefunden, bei der es nicht darum geht, Reaktionsfähigkeit usw. zu opfern.

Wickeln Sie einfach Ihre Leinwand in einen DIV -Behälter (kein Styling) und setzen Sie den Inhalt des DIV auf eine leere Leinwand mit ID zurück, bevor Sie den Chartkonstruktor aufrufen.

Beispiel:

HTML:

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

JS:

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

Question 10

Ich habe versucht, Leinwand mit JQuery zu ändern, aber es funktioniert nicht gut. Ich finde CSS3 Ist die beste Option, die Sie anprobieren können, wenn Sie auf einem bestimmten Niveau auf dem schwebenden Zooming möchten.

Folgende Schwebeoption aus einem anderen Codepan -Link:

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

Folgen Sie meinem Codepan -Link:

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

Question 11

Hier ist die offizielle Dokumentation: https://www.chartjs.org/docs/latest/general/responsive.html

Erkennen, wenn Änderungen der Leinwandgröße nicht direkt über das Canvas -Element durchgeführt werden können. Diagramm.js verwendet seinen übergeordneten Container, um die Rendern und Anzeigen von Canvas -Rendern zu aktualisieren. Diese Methode erfordert jedoch, dass der Container relativ positioniert und nur der Diagramm -Leinwand gewidmet ist. Die Reaktionsfähigkeit kann dann erreicht werden, indem relative Werte für die Containergröße (Beispiel) festgelegt werden:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

Question 12

Ich hatte die gleiche Art von Skalierungsproblemen mit einem Winkel -CLI. Konnte es zum Laufen bringen, indem diese Zeile aus dem Index.html entfernt wurde:

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

und dann in der Angular-Cli.json-Datei im Abschnitt "Skrips" unter Verwendung Folgendes:

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

Quelle: MikeBarr58

Question 13

Ich habe mehrere Antworten in diesem Thread ausprobiert und was für mich funktioniert hat (beachten Sie, dass ich ReactJs verwende) und überprüfte meine vorherigen Requisiten, die in die Diagrammkomponente übergeben wurden. Als ich mein DOM verändert habe, wurde das Diagramm mit leeren Daten neu gezeichnet.

componentDidUpdate(prevProps: ChartProps) { if(prevProps.data !== props.data) renderChart(); }

Question 14

Das akzeptierte - responsive:true, maintainAspectRatio:false - für mein Szenario nicht funktioniert. Aber ich fand, dass wir das einfach nennen können update Methode in der Tabelle.

Also habe ich Werte innerhalb von MatchMedia -Hörern optimiert.

myRadarChart.options.scales.r.pointLabels.font.size = "1rem";
myRadarChart.update();

Question 15

Hinzufügen div und es wird das Problem lösen

<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>

Question 16

 let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
 let width = canvasBox.clientWidth;
 let height = canvasBox.clientHeight;
 let charts = ReactDOM.findDOMNode(this.refs.charts);
 let ctx = charts.getContext('2d');
 ctx.canvas.width = width;
 ctx.canvas.height = height;
 this.myChart = new Chart(ctx);