Page History
[ 
|../../index.htm#lansa/vlwebeng02_0055.htm]
現在地:
...
次のソース例は、Visual
...
LANSA
...
で提供される
...
...
円グラフのサンプル・ウィジェットのコピーです。
...
function(
...
PROTOTYPE,
...
WIDGET
...
)
...
{
...
...
//--------------------------------------------------------------------------
...
...
//
...
...
円グラフが完成した場合のみ、このグラフをロードして
...
Widget
...
完了
...
...
//--------------------------------------------------------------------------
...
...
google.load(
...
'visualization',
...
'1',
...
{
...
packages:
...
["corechart"
...
],
...
callback:WIDGET.Finalize
...
}
...
);
...
...
//--------------------------------------------------------
...
...
//
...
WIDGET-インターフェース
...
関数
...
(VL-ランタイムからの呼び出し)
...
...
//--------------------------------------------------------
...
...
//
...
...
//
...
'onCreateInstance'
...
-
...
LANSA
...
がこのクラスのインスタンスを作成時に呼び出し
...
...
//
...
...
PROTOTYPE.onCreateInstance
...
=
...
function()
...
...
{
...
...
//
...
Create
...
the
...
datatable
...
...
this.m_DataTable
...
=
...
new
...
google.visualization.DataTable();
...
...
this.m_DataTable.addColumn(
...
'string',
...
'Caption'
...
);
...
...
this.m_DataTable.addColumn(
...
'number',
...
'Value'
...
);
...
...
}
...
...
...
//
...
...
//
...
'onRealizeControl'
...
-
...
LANSA
...
がこのクラスのインスタンスのビジュアル表現作成時に呼び出し
...
...
//
...
...
//
...
パラメータ:
...
...
//
...
...
//
...
-
...
parentDiv
...
:
...
このコントロールのコンテナとして作成された Divこのサイズとスタイルは RDMLX でコントロール。
//
...
コンテンツは以下の
...
JavaScript
...
でコントロール
...
...
//
...
...
PROTOTYPE.onRealizeControl
...
=
...
function(
...
parentDiv
...
)
...
...
{
...
...
//
...
円グラフ作成
...
...
this.m_Chart
...
=
...
new
...
google.visualization.PieChart(
...
parentDiv
...
);
...
...
//
...
イベント・ハンドラーを連結
...
...
this.AttachEvents();
...
...
//
...
描画の準備完了
...
...
this.DrawChart();
...
...
}
...
...
//
...
...
//
...
'onSizeChanged
...
-
...
ウィジェトのサイズ変更時に呼び出し
...
...
//
...
...
PROTOTYPE.onSizeChanged
...
=
...
function()
...
...
{
...
...
this.DrawChart();
...
...
}
...
...
////////////////
...
...
//
...
プロパティ
...
//
...
...
////////////////
...
...
//
...
...
//
...
getTitle
...
...
//
...
...
PROTOTYPE.getTitle
...
=
...
function()
...
...
{
...
...
return
...
this.m_Title;
...
...
}
...
...
//
...
...
//
...
setTitle
...
...
//
...
...
PROTOTYPE.setTitle
...
=
...
function(
...
strTitle
...
)
...
...
{
...
...
this.m_Title
...
=
...
strTitle;
...
...
this.DrawChart();
...
...
}
...
...
/////////////
...
...
//
...
メソッド
...
//
...
...
/////////////
...
...
//
...
...
//
...
Insert
...
-
...
データを円グラフに挿入
...
...
//
...
...
//
...
パラメータ:
...
...
//
...
-
...
値:
...
整数
...
...
//
...
-
...
キャプション:
...
文字列
...
...
//
...
...
//
...
戻りタイプ
...
:
...
整数
...
...
//
...
...
PROTOTYPE.Insert
...
=
...
function(
...
iValue,
...
strCaption
...
)
...
...
{
...
...
var
...
index
...
=
...
this.m_DataTable.addRow(
...
[
...
strCaption,
...
iValue
...
]
...
);
...
...
this.DrawChart();
...
...
return
...
index;
...
...
}
...
...
//
...
...
//
...
Clear
...
-
...
すべてのデータをクリア
...
...
//
...
...
PROTOTYPE.Clear
...
=
...
function()
...
...
{
...
...
//メンバのデータ初期化
...
...
this.m_DataTable.removeRows(
...
0,
...
this.m_DataTable.getNumberOfRows()
...
);
...
...
this.DrawChart();
...
...
}
...
...
//
...
...
//
...
削除
...
-
...
円グラフから指定のインデックスを削除
...
...
//
...
...
//
...
パラメータ:
...
...
//
...
-
...
インデックス:
...
整数
...
...
//
...
...
PROTOTYPE.Remove
...
=
...
function(
...
index
...
)
...
...
{
...
...
index
...
-=
...
1;
...
...
if
...
(
...
(
...
index
...
>=
...
0
...
)
...
&&
...
(
...
index
...
<
...
this.m_DataTable.getNumberOfRows()
...
)
...
)
...
...
{
...
...
this.m_DataTable.removeRow(
...
index
...
);
...
...
this.DrawChart();
...
...
}
...
...
}
...
...
//////////////////////
...
...
//
...
ヘルパー機能
...
//
...
...
//////////////////////
...
...
//
...
...
//
...
DrawChart
...
...
//
...
...
PROTOTYPE.DrawChart
...
=
...
function()
...
...
{
...
...
if
...
(
...
this.m_Chart
...
)
...
...
{
...
...
//
...
Draw
...
it
...
using
...
our
...
data.
...
...
this.m_Chart.draw(
...
this.m_DataTable,
...
...
{
...
...
title
...
:
...
this.m_Title,
...
...
legend
...
:'none',
...
...
pieSliceText
...
:'label',
...
...
backgroundColor:'transparent'
...
...
});
...
...
}
...
...
}
...
...
//
...
...
//
...
AttachEvents
...
...
//
...
...
PROTOTYPE.AttachEvents
...
=
...
function()
...
...
{
...
...
var
...
pThis
...
=
...
this;
...
...
//
...
イベント:
...
select
...
...
google.visualization.events.addListener(
...
this.m_Chart,
...
'select',
...
function()
...
...
{
...
...
var
...
...
selectedItem
...
=
...
pThis.m_Chart.getSelection()
...
[0
...
];
...
...
if
...
(
...
selectedItem
...
)
...
...
{
...
...
pThis.fireItemSelected(
...
(
...
selectedItem.row
...
+
...
1
...
),
...
pThis.m_DataTable.getValue(
...
selectedItem.row,
...
1
...
),
...
pThis.m_DataTable.getValue(
...
selectedItem.row,
...
0
...
)
...
);
...
...
}
...
...
});
...
...
}
...
...
//
...
ロード中
...
(コールバック待ち)
...
...
return
...
WIDGET.Loading;
...
}
...