JsChartコンポーネントの使用方法の詳細な説明

今回は、JsChart コンポーネントの使用について詳しく説明します。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 画像の表示 次に、線形グラフを表示するための少量のコードを記述する必要があります。まず、画像に必要なデータを準備します。データを提供するには

JavaScript 配列 を使用します。配列の各要素は 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>

。この記事の事例を読んでその方法をマスターした方は、さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:

H5 のセマンティック タグ

WebGL による json および echarts チャートの操作方法

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