Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > PieChart > 概念 > テーブルとのバインディング |
wijpiechart の ID を使用して要素(この例ではテーブル)の hide を呼び出すことで、PieChart ウィジェットを HTML テーブルにバインドできます。「jQuery の構文」を参照してください。
ドロップダウンからスクリプトをコピーして、<body> セクション内に貼り付けます
スクリプト |
コードのコピー |
---|---|
<table id="wijpiechart"> <caption> Average Bytes per Page by Content Type</caption> <thead> <tr> <td> </td> <th> kB </th> </tr> </thead> <tbody> <tr> <th scope="row"> HTML </th> <td> 34 </td> </tr> <tr> <th scope="row"> Images </th> <td> 450 </td> </tr> <tr> <th scope="row"> Stylesheets </th> <td> 27 </td> </tr> <tr> <th scope="row"> Scripts </th> <td> 123 </td> </tr> <tr> <th scope="row"> Flash </th> <td> 84 </td> </tr> <tr> <th scope="row"> Other </th> <td> 25 </td> </tr> </tbody> </table> |
通常の <div> マークアップの代わりに、次のようなテーブルマークアップを本体に貼り付けて、グラフのデータを提供します。
ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます
スクリプト |
コードのコピー |
---|---|
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart().hide(); }); </script> |
スクリプトの下の head セクションに次のスタイルを貼り付けて、グラフの幅と高さを設定します。
ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます
スクリプト |
コードのコピー |
---|---|
<style type="text/css">
#wijpiechart
{
width: 475px;
height: 375px;
}
</style> |
この円グラフは、実際のウィジェットで次のように表示されます。