JsChartコンポーネントの使い方と機能を詳しく紹介

JSChart は、Web ページ上に統計情報によく使用されるアイコンを生成することができ、非常に使いやすい JS コンポーネントです。この記事では主にJsChartコンポーネントの使い方を詳しく紹介しますので、必要な方は参考にしてください

JsChartとは何ですか?

JSChart は、統計情報によく使用される Web ページ上にアイコンを生成することができ、非常に使いやすい JS コンポーネントです。

JsChart を使用します

1 つ。 jscharts.js

IIをインポートします。 jscharts.jsp テスト ページを作成します

1. JScharts ライブラリをダウンロードします。 公式 Web サイトから JScharts ライブラリをダウンロードします。圧縮パッケージ内の jscharts.js ファイルを使用します。 150KBくらいあります。

JScharts ライブラリを使用する Web ページ ファイル (.html や .jsp など) に JScharts ライブラリを含めます。

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

コンテナの定義 JSchartsで生成した画像をWebページファイル上に表示するには、Webページコンテナに画像を入れる必要があります。通常、この Web ページ コンテナを定義するには

タグを使用します。この p 要素には一意の ID 値を指定することが必須です。例:

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

注: この p コンテナーのコンテンツは、JScharts イメージに置き換えられます。

JScharts 画像の表示 次に、線形グラフを表示するための少量のコードを記述する必要があります。まず、画像に必要なデータを準備する必要があります。配列の各要素は 2 つの要素で構成されます

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

上記は私がコンパイルしたものです。 for you はい、今後皆さんのお役に立てれば幸いです。

関連記事:

Vue の組み込みコンポーネント コンポーネントのアプリケーション シナリオに関する簡単な説明

vue2 での less の使用に関する簡単なチュートリアル

vue ボタン コンポーネントを開発するためのサンプル コード

以上がJsChartコンポーネントの使い方と機能を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。