So zeichnen Sie Balkendiagramme mit JavaScript und HTML5 -Leinwand

In einem früheren Tutorial haben wir mithilfe von HTML5 -Leinwand ein Kreisdiagramm oder ein Donut -Diagramm zeichnen. In diesem Tutorial zeige ich Ihnen, wie Sie JavaScript und die HTML5 -Leinwand verwenden, um Daten unter Verwendung von Balkendiagrammen grafisch anzuzeigen.

Was ist ein Balkendiagramm? Von Finanzberichten über PowerPoint -Präsentationen bis hin zu Infografiken werden Balken sehr häufig verwendet, da sie einen Blick auf numerische Daten bieten, die sehr leicht zu verstehen sind. Beispiel:

horizontale Balkendiagramme und vertikale Balkendiagramme abhängig von der Diagrammorientierung

gestapelte Balkendiagramme oder klassische Balkendiagramme für die Darstellung mehrerer Datenreihen

2D oder 3D -Stange -Diagramme

2D- oder 3D -Stange -Diagramme

. In ein Balkendiagramm, unabhängig von seinem Typ:

Die Diagrammdaten: Dies sind Sätze von Zahlen und zugehörigen Kategorien, die durch das Diagramm dargestellt werden. Rechtecke mit Abmessungen proportional zu den dargelegten Daten. Projekt

Um mit JavaScript und der HTML5 -Leinwand mit dem Zeichnen zu beginnen, müssen wir unser Projekt wie folgt einrichten:
• Erstellen Sie einen Ordner, um die Projektdateien zu halten; Nennen wir diesen Ordner Barchart
Objekt zusammen mit anderen Informationen. Fügen wir es zu unserer
• script.js
fügen Sie es hinzu:
• Implementieren Sie die Barchart -Klasse

Unsere MaxValue

-Meigenschaft. Wir brauchen diese Zahl, da wir alle Balken gemäß diesem Wert und gemäß der Größe der Leinwand skalieren müssen. Andernfalls können unsere Balken außerhalb des Anzeigebereichs gehen, und das wollen wir nicht. Laden des

index.html

in einem Browser sollte ein Ergebnis wie folgt erzeugen:

Hinzufügen des Namens der Datenreihe und der Diagramm -Legende

Um den Namen der Datenreihe unterhalb des Diagramms hinzuzufügen, müssen wir unserem Titel die folgende Methode hinzufügen, um Dinge wie Schriftgröße, Schriftfamilie und Schriftgewicht festzulegen. Wir akzeptieren auch einen String -Wert, um die Ausrichtung des Diagrammtitels zu bestimmen. Wir verwenden diesen Wert, um die Ausrichtung des Titels zu kontrollieren und die Position der neuen Zeichenfolge neben seiner Ausrichtung zu bestimmen. Aussehen:

Um die Legende hinzuzufügen, müssen wir zunächst index.html so ändern, dass dies so aussieht:

{<br>    "Classical Music": 16, <br>    "Alternative Rock": 12, <br>    "Pop": 18, <br>    "Jazz": 32,<br>}<br>

Der Legend <code>Barchart wird als Platzhalter für die Legende des Diagramms verwendet. Das Attribut für

verbindet die Legende mit der Leinwand, die das Diagramm hält. Wir müssen jetzt den Code hinzufügen, der die Legende erstellt. Wir werden dies in der Datei index.js <pre class="brush:php;toolbar:false">draw() {&lt;br&gt; this.drawGridLines();&lt;br&gt; this.drawBars();&lt;br&gt; this.drawLabel();&lt;br&gt;}&lt;br&gt;</pre> tun, nachdem der Code, der den Namen der Datenreihe zeichnet,. Der Code identifiziert das dem Diagramm entsprechende <code> Legend <p> Tag und fügt die Liste der Kategorien aus dem Datenmodell des Diagramms zusammen mit der entsprechenden Farbe hinzu. Die resultierende </p> index.js <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174087787591165.png" class="lazy" alt="So zeichnen Sie Balkendiagramme mit JavaScript und HTML5 -Leinwand" > -Datei sieht Folgendes aus: <p> <code>index.html

, in dem ein Endergebnis erzeugt wird, das so aussieht:

var myBarchart = new Barchart(<br>    {<br>        canvas:myCanvas,<br>        seriesName:"Vinyl records",<br>        padding:20,<br>        gridScale:5,<br>        gridColor:"#eeeeee",<br>        data: {<br>            "Classical Music": 16, <br>            "Alternative Rock": 12, <br>            "Pop": 18, <br>            "Jazz": 32,<br>        },<br>        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"],<br>        titleOptions: {<br>            align: "center",<br>            fill: "black",<br>            font: {<br>              weight: "bold",<br>              size: "18px",<br>              family: "Lato"<br>            }<br>        }<br>    }<br>);<br><br>myBarchart.draw();<br>

legend for index.js legend Versuchen Sie, verschiedene Optionen an das Diagramm zu übergeben, um das Endergebnis zu sehen. Können Sie als Übung in Code schreiben, was diese Grid-Linien mehrfarbig machen? Es erfordert nur ein bisschen Mathematik und ein bisschen JavaScript -Wissen. Sie haben jetzt alles, was Sie benötigen, um Ihre eigenen Balkendiagramme zu zeichnen.

Dieser Beitrag wurde mit Beiträgen von Nitish Kumar aktualisiert. Nitish ist ein Webentwickler mit Erfahrung beim Erstellen von E -Commerce -Websites auf verschiedenen Plattformen. Er verbringt seine Freizeit damit, an persönlichen Projekten zu arbeiten, die seinen Alltag erleichtern, oder langen Abendspaziergängen mit Freunden.

<html><br><body><br>    <canvas id="myCanvas"   style="max-width:90%"></canvas><br>    <legend for="myCanvas"></legend><br>    <script type="text/javascript" src="script.js"></script><br></body><br></html><br>

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Balkendiagramme mit JavaScript und HTML5 -Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!