JsChartコンポーネントの使用方法の詳細な説明-H5 チュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-27 15:27:02

オリジナル

1993 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。