Detaillierte Einführung in die Verwendung und Funktionen der JsChart-Komponente

JSChart kann Symbole auf Webseiten generieren, die häufig für statistische Informationen verwendet werden. Es handelt sich um eine sehr einfach zu verwendende JS-Komponente. In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Verwendung der JsChart-Komponente vorgestellt. Freunde in Not können sich auf

Was ist JsChart?

JSChart kann Symbole auf Webseiten generieren, die häufig für statistische Informationen verwendet werden. Es handelt sich um eine sehr einfach zu verwendende JS-Komponente.

JsChart verwenden

Eins. jscharts.js importieren

2. Schreiben Sie die jscharts.jsp-Testseite

1. Laden Sie die JScharts-Bibliothek von der offiziellen Website herunter. Wir verwenden die Datei jscharts.js im komprimierten Paket. Es sind etwa 150 KB.

JScharts-Bibliothek verwenden Fügen Sie die JSharts-Bibliothek in Webseitendateien ein (z. B. .html oder .jsp).

<script type="text/javascript" src="js/jscharts.js"></script>

Container definieren Um das von JSharts generierte Bild in der Webseitendatei anzuzeigen, müssen Sie das Bild in den Webseitencontainer einfügen. Normalerweise verwenden wir

-Tags, um diesen Webseitencontainer zu definieren, und es ist obligatorisch, einen eindeutigen ID-Wert für dieses p-Element anzugeben. Zum Beispiel:

<p id="chartcontainer">这里将用来显示图形报表</p>

Hinweis: Der Inhalt in diesem p-Container wird durch JSharts-Bilder ersetzt.

JScharts-Bild anzeigen Unten müssen wir eine kleine Menge Code schreiben, um ein lineares Diagramm anzuzeigen. Zuerst müssen wir die für das Bild erforderlichen Daten vorbereiten. Jedes Element im Array besteht aus 2 Elementen

<script type="text/javascript">
 var myData = new Array([ "商品1", 20 ], [ "商品2", 10 ], [ "商品3", 30 ], [ "商品4", 10 ],
  [ "商品5", 5 ]);
 var myChart = new JSChart(&#39;chartcontainer&#39;, &#39;line&#39;);
 myChart.setDataArray(myData);
 myChart.draw();
 </script>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Eine kurze Diskussion über die Anwendungsszenarien der integrierten Komponentenkomponenten von Vue

Ein einfaches Tutorial zur Verwendung von weniger in vue2

Beispielcode für die Entwicklung einer Schaltflächenkomponente mit vue

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung und Funktionen der JsChart-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!