Page History
次のソース例は、Visual LANSA で提供される Google 円グラフのサンプル・ウィジェットのコピーです。
[ 
|../../index.htm#lansa/vlwebeng02_0055.htm]
現在地:
...
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;
...
}