SpreadJS製品ヘルプ
アイコンセットルール
SpreadJS > 開発者の手引き > 機能 > データ視覚化とオブジェクトの管理 > 条件付き書式 > アイコンセットルール

アイコンセットルールを使用すると、値に基づくアイコンを表示できます。 アイコンの種類を指定できるほか、セルにアイコンだけを表示するか、またはアイコンとデータを表示するかを指定できます。 次の図は、アイコンと値を表示するアイコンセットルールを示します。

iconSetTypeメソッドおよびIconSetType列挙体を使用して、さまざまな種類のアイコンセットを指定できます。 reverseIconOrderメソッドを使用すると、アイコンの順序を逆にできます。 showIconOnlyメソッドを使用すると、アイコンだけを表示するのか、またはアイコンとデータを表示するのかを指定できます。

アイコンセットルールを使用する場合、IconSetRuleクラスのicons()メソッドを使用すると、カスタムアイコンを設定できます。iconsメソッドを使用すると、IconCriterionクラスの個々のアイコン基準をカスタマイズできます。また、アイコンについての情報(IIconInfoオブジェクトの配列)を提供することもできます。

複数のカスタムアイコンを同時に設定するには、icons()メソッドにIIconInfoオブジェクト配列を渡します。IIconInfoを編集することで、特定のiconCriterionによって表示するアイコンの種類も定義できます。

アイコンセットルールには、カスタムアイコンを作成して使用することもできます。

コードの使用

次のサンプルコードは、アイコンセットルールを作成します。

JavaScript
コードのコピー
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);

var cfs = activeSheet.getConditionalFormats();
var iconSetRule = new GC.Spread.Sheets.IconSetRule();
iconSetRule.ranges =[new GC.Spread.Sheets.Range(0,0,4,1)];
iconSetRule.iconSetType(GC.Spread.Sheets.IconSetType.FourTrafficLights);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GC.Spread.Sheets.IconCriterion(true, GC.Spread.Sheets.IconValueType.Number, 1);
iconCriteria[1] = new GC.Spread.Sheets.IconCriterion(true, GC.Spread.Sheets.IconValueType.Number, 10);
iconCriteria[2] = new GC.Spread.Sheets.IconCriterion(true, GC.Spread.Sheets.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
cfs.addRule(iconSetRule);

コードの使用

次のサンプルコードは、アイコンセットルールのためにカスタムアイコンを作成します。

JavaScript
コードのコピー
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);

var base = GC.Spread.Sheets.IconSetRule.getIcon;
GC.Spread.Sheets.IconSetRule.getIcon = function (iconSetType, iconIndex) {
                    var icon = base.apply(this, arguments);
                    if (iconSetType === GC.Spread.Sheets.IconSetType.ThreeArrowsColored) {
                        if (iconIndex === 0) {
                            return "images/Star2.png";
                        } else if (iconIndex === 1){
                            return "images/Rating4.png";
                        } else if (iconIndex === 2) {
                            return "images/Box4.png";
                        }
                    }
                    return icon;
                };


var cfs = activeSheet.getConditionalFormats();
var iconSetRule = new GC.Spread.Sheets.IconSetRule();
iconSetRule.ranges =[new GC.Spread.Sheets.Range(0,0,4,1)];
iconSetRule.iconSetType(GC.Spread.Sheets.IconSetType.ThreeArrowsColored);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GC.Spread.Sheets.IconCriterion(true, GC.Spread.Sheets.IconValueType.Number, 1);
iconCriteria[1] = new GC.Spread.Sheets.IconCriterion(true, GC.Spread.Sheets.IconValueType.Number, 10);
iconCriteria[2] = new GC.Spread.Sheets.IconCriterion(true, GC.Spread.Sheets.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
cfs.addRule(iconSetRule);

注: iconCriterionのカスタムアイコンを設定する場合は、必ず列挙体のスコープ内でIconSetTypeを選択することが重要です。また、選択したIconSetTypeに対して有効なiconIndexを設定する必要があります。

たとえば、IconSetTypeとしてthreeTrafficLightsを選択したとします。threeTrafficLightsには3つのアイコンしかないので、iconIndexは0、1、2のいずれかとなります。

IconSetTypeまたはiconIndexがスコープ外だと、設定したアイコン基準に対するアイコンが何も表示されなくなります。この場合、セル内のアイコンの表示位置は空白となります。

関連トピック