MESCIUS SPREAD for Windows Forms 15.0J
イメージスパークライン
MESCIUS SPREAD for Windows Forms 15.0J > 開発者ガイド > スパークライン > 数式を使用してスパークラインの追加 > イメージスパークライン

イメージスパークラインを使用して、セルにイメージを配置することができます。イメージスパークライン関数の表示モードを切り替えることにより、イメージをさまざまなサイズで表示できます。

image sparklines mode example

イメージスパークラインの数式には、次の書式を使用します。

=IMAGE(url, [mode, height, width, clipX, clipY, clipHeight, clipWidth, vAlign, hAlign])

イメージスパークラインの数式には、次のオプションを使用できます。

オプション 説明
URL ウェブ上にあるイメージへのURL、またはイメージのbase64 文字列。

mode

省略可能

 イメージのサイズを設定する方法を指定します。
  1. セル内にイメージを収めるように縦横比を維持します。
  2. セル全体にイメージを広げます。
  3. 元のサイズを維持し、はみ出した部分はトリミングします。
  4. カスタムサイズ。

デフォルト値は1です。

height

省略可能

イメージの高さを指定します。

表示モードオプションは4に設定する必要があります。

width

省略可能

イメージの幅を指定します。

表示モードオプションは4に設定する必要があります。

clipX

省略可能

ターゲットコンテキストに描画するソースイメージのサブ矩形の左上隅のx軸座標。

デフォルト値は0です。

clipY

省略可能

ターゲットコンテキストに描画するソースイメージのサブ矩形の左上隅のy軸座標。

デフォルト値は0です。

clipHeight

省略可能

ターゲットコンテキストに描画するソースイメージのサブ矩形の高さ。

デフォルト値はイメージの高さです。

clipWidth

省略可能

ターゲットコンテキストに描画するソースイメージのサブ矩形の幅。

デフォルト値はイメージの幅です。

vAlign

省略可能

 イメージの垂直方向の配置を指定します。

0 - 上
1 - 上下中央
2 - 下

デフォルト値は1（上下中央）です。

hAlign

省略可能

 イメージの水平方向の配置を指定します。

0 - 左
1 - 左右中央
2 - 右

デフォルト値は1（左右中央）です。

イメージスパークラインのパラメータ値に基づく異なる動作

イメージスパークラインは、次のパラメータ値に基づいて異なる動作をします。

  1. 表示モードが4に設定されている場合、イメージの高さと幅を指定する必要があります。指定しない場合、空白のセルが返されます。
  2. clipXの設定時にclipWidth 値が指定されていない場合、clipWidth値は（イメージの幅-clipX）として設定されます。 同様に、clipYの設定時にclipHeight値が指定されていない場合、clipHeight値は（イメージの高さ-clipY）として設定されます。
  3. clipXがイメージの幅よりも大きい場合、clipWidthが0に設定されます。同様に、clipYがイメージの高さよりも大きい場合、clipHeightが0に設定されます。
  4. mode、vAlign、またはhAlignが不正な値に設定されている場合、実行時にモードが「1」に設定されます。
  5. Width、Height、ClipX、ClipY、ClipHeight、ClipWidthパラメータは、0より小さい値に設定されている場合は、0に置き換えられます。

使用例

以下は、データ会計組織が世界で最も人口の多い10か国のリストを表示したい例です。また、イメージスパークラインを使用して、ウェブURLから取得された各国の国旗の画像が表示されます。

image sparkline usage

C#
コードのコピー 
// シートを取得します。
var worksheet = fpSpread1.Sheets[0].AsWorksheet();
            
// 値をセルに設定します。
worksheet.Cells[1, 0].Value = "国旗";
worksheet.Cells[0, 0].Value = "人口トップ10の国";
fpSpread1_Sheet1.AddSpanCell(0, 0, 1, 5);

// データを設定します。
worksheet.SetValue(1, 1, new object[,]
{
    {"国", "ランク", "人口（2020）", "土地面積（平方キロ）"},
    {"中国", 1, 1439323776, 9388211 },
    {"インド", 2, 1380004385, 2973190},
    {"アメリカ", 3, 331002651, 9147420},
    {"インドネシア", 4, 273523615, 1811570},
    {"パキスタン", 5, 220892340, 770880},
    {"ブラジル", 6, 212559417, 8358140},
    {"ナイジェリア", 7, 206139589, 910770},
    {"バングラデシュ", 8, 164689383, 130170},
    {"ロシア", 9, 145934462, 16376870},
    {"メキシコ", 10, 128932753, 1943950}
});

// イメージ関数スパークラインの数式をセルに設定します。
worksheet.Cells[2, 0].Formula = "IMAGE(\"https://www.wallpaperflare.com/static/193/1001/133/five-starred-red-flag-china-flag-five-wallpaper.jpg\")";
worksheet.Cells[3, 0].Formula = "IMAGE(\"https://www.pngfind.com/pngs/m/21-211631_the-indian-flag-png-indian-flag-icon-transparent.png\")";
worksheet.Cells[4, 0].Formula = "IMAGE(\"https://previews.123rf.com/images/auttkhamkhauncham/auttkhamkhauncham1507/auttkhamkhauncham150700090/42304741-usa-flag.jpg\")";
worksheet.Cells[5, 0].Formula = "IMAGE(\"https://i.pinimg.com/236x/e8/0a/d5/e80ad5d4ea09700a78719ca051d19cbd.jpg\")";
worksheet.Cells[6, 0].Formula = "IMAGE(\"https://static.vecteezy.com/system/resources/previews/000/114/048/non_2x/free-vector-pakistan-flag.jpg\")";
worksheet.Cells[7, 0].Formula = "IMAGE(\"https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/2560px-Flag_of_Brazil.svg.png\")";
worksheet.Cells[8, 0].Formula = "IMAGE(\"https://i.pinimg.com/originals/73/22/94/732294310c7e9fa3da611030168923fb.jpg\")";
worksheet.Cells[9, 0].Formula = "IMAGE(\"https://images-na.ssl-images-amazon.com/images/I/31V23jzzMgL._AC_.jpg\")";
worksheet.Cells[10, 0].Formula = "IMAGE(\"https://upload.wikimedia.org/wikipedia/en/thumb/f/f3/Flag_of_Russia.svg/1200px-Flag_of_Russia.svg.png\")";
worksheet.Cells[11, 0].Formula = "IMAGE(\"https://www.pngkey.com/png/detail/442-4423822_mexico-icon-mexican-flag-icon-png.png\")";

// セルの背景色を設定します。
worksheet.Cells["A1"].Interior.Color = GrapeCity.Spreadsheet.Color.FromArgb(unchecked((int)0xFF9FD5B7));
worksheet.Cells["A2:E2"].Interior.Color = GrapeCity.Spreadsheet.Color.FromArgb(unchecked((int)0xFFd9eee2));
worksheet.Cells["A3:E12"].Interior.Color = GrapeCity.Spreadsheet.Color.FromArgb(unchecked((int)0xFFf5fbf8));
Visual Basic
コードのコピー 
'　シートを取得します。
Dim worksheet = FpSpread1_Sheet1.AsWorksheet()

' 値をセルに設定します。
worksheet.Cells(1, 0).Value = "国旗"
worksheet.Cells(0, 0).Value = "人口トップ10の国"
FpSpread1_Sheet1.AddSpanCell(0, 0, 1, 5)

'Set data
worksheet.SetValue(1, 1, New Object(,) {
        {"国", "ランク", "人口（2020）", "土地面積（平方キロ）"},
        {"中国", 1, 1439323776, 9388211 },
        {"インド", 2, 1380004385, 2973190},
        {"アメリカ", 3, 331002651, 9147420},
        {"インドネシア", 4, 273523615, 1811570},
        {"パキスタン", 5, 220892340, 770880},
        {"ブラジル", 6, 212559417, 8358140},
        {"ナイジェリア", 7, 206139589, 910770},
        {"バングラデシュ", 8, 164689383, 130170},
        {"ロシア", 9, 145934462, 16376870},
        {"メキシコ", 10, 128932753, 1943950}
})

' イメージ関数スパークラインの数式をセルに設定します。
worksheet.Cells(2, 0).Formula = "IMAGE(""https://www.wallpaperflare.com/static/193/1001/133/five-starred-red-flag-china-flag-five-wallpaper.jpg"")"
worksheet.Cells(3, 0).Formula = "IMAGE(""https://www.pngfind.com/pngs/m/21-211631_the-indian-flag-png-indian-flag-icon-transparent.png"")"
worksheet.Cells(4, 0).Formula = "IMAGE(""https://previews.123rf.com/images/auttkhamkhauncham/auttkhamkhauncham1507/auttkhamkhauncham150700090/42304741-usa-flag.jpg"")"
worksheet.Cells(5, 0).Formula = "IMAGE(""https://i.pinimg.com/236x/e8/0a/d5/e80ad5d4ea09700a78719ca051d19cbd.jpg"")"
worksheet.Cells(6, 0).Formula = "IMAGE(""https://static.vecteezy.com/system/resources/previews/000/114/048/non_2x/free-vector-pakistan-flag.jpg"")"
worksheet.Cells(7, 0).Formula = "IMAGE(""https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/2560px-Flag_of_Brazil.svg.png"")"
worksheet.Cells(8, 0).Formula = "IMAGE(""https://i.pinimg.com/originals/73/22/94/732294310c7e9fa3da611030168923fb.jpg"")"
worksheet.Cells(9, 0).Formula = "IMAGE(""https://images-na.ssl-images-amazon.com/images/I/31V23jzzMgL._AC_.jpg"")"
worksheet.Cells(10, 0).Formula = "IMAGE(""https://upload.wikimedia.org/wikipedia/en/thumb/f/f3/Flag_of_Russia.svg/1200px-Flag_of_Russia.svg.png"")"
worksheet.Cells(11, 0).Formula = "IMAGE(""https://www.pngkey.com/png/detail/442-4423822_mexico-icon-mexican-flag-icon-png.png"")"

' セルの背景色を設定します。
worksheet.Cells("A1").Interior.Color = GrapeCity.Spreadsheet.Color.FromArgb(&HFF9FD5B7)
worksheet.Cells("A2:E2").Interior.Color = GrapeCity.Spreadsheet.Color.FromArgb(&HFFD9EEE2)
worksheet.Cells("A3:E12").Interior.Color = GrapeCity.Spreadsheet.Color.FromArgb(&HFFF5FBF8)

SPREAD デザイナの使用

  1. スパークラインを表示するセルを選択します。
  2. ［挿入］メニューを選択します。
  3. ［スパークライン］ドロップダウンからスパークラインの種類を選択します。<
  4. ［イメージスパークラインの設定］ダイアログボックスにURLを設定します。

    ［イメージスパークラインの設定］ダイアログボックス

    上記の画像に示すように、スパークラインの追加設定を設定することもできます。

  5. ［OK］をクリックします。
  6. ［ファイル］メニューから［適用して終了］を選択し、変更を保存して SPREAD デザイナを終了します。

 

 

© MESCIUS inc. All rights reserved.