ホームページ  >  記事  >  ウェブフロントエンド  >  JsChart コンポーネントの使用の概要

JsChart コンポーネントの使用の概要

小云云
小云云オリジナル
2018-03-06 09:24:581115ブラウズ

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

JsChart を使用します

1 つ。 jscharts.jsをインポート

2. jscharts.jsp テスト ページを作成します

1. JScharts ライブラリをダウンロードします。 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('chartcontainer', 'line');
 myChart.setDataArray(myData);
 myChart.draw();
 </script>

関連する推奨事項:


。 JSChart 軽量グラフィカル レポート ツール (組み込み関数の中国語リファレンス)_JavaScript スキル

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。