V3.0J
V3.0JV2.2JV2.1JV2JV1J

Sparkline

Sparkline(スパークライン)コントロールは、データの傾向を小さなグラフに表示するレポートコントロールです。このコントロールは、最新の値をスケール上に右端のデータポイントとして表示して以前の値と比較し、時間の経過でデータの一般的な変更内容を表示できます。周囲のテキストと同様の高さで、Line、Column、Whiskers、Area、StackedBarの線種を使用してデータを表示できます。

主なプロパティ

Sparklineで使用することができる主なプロパティを説明します。すべてのプロパティを表示するには、プロパティモードを[詳細プロパティを表示]にする必要があります。

共通

  • 線種: スパークラインには以下の種類があります。
    • Line

      Lineスパークラインは、広く金融・経済データ分析で使用され、連続的なデータの流れに基づいています。通貨の為替レート、価格の変化などのデータを表示する場合に使用することができます。
    • Columns

      Columnsスパークラインは、スポーツのスコア、レジの領収書など、以前の値と現在の値が直接関連しないデータに使用することができます。この場合は、Lineスパークラインのように連続的なデータの流れではなく、離散データ点で操作します。
    • Whiskers

      Whiskersスパークラインは、データを「勝/敗/引き分け」(例えば、ゲームの場合)または「True/False」(たとえば、販売目標、温度変化)の形式で表示することができます。 この種類はColumnスパークラインとよく似ていますが、引き分け(0)の場合は違う方法で描画します。Whiskersスパークラインでは、ベースラインより上に表示されるバーは正の値、下に表示されるバーは負の値、ベースラインはゼロ値を表します。
    • Area

      AreaスパークラインはLineスパークラインとよく似ていますが、ラインの下のスペースが影付きで表示されます。
    • StackedBar

      StackedBarスパークラインは、1本の横棒として表示され、個別の幅と色を持った複数のセグメントで構成されています。各セグメントの幅は全体に対して占める割合を表し、最も幅の広いセグメントは最大値であることを意味します。個々の値は、その色の明るさによって識別されます。

グループ

  • 名前: まだレポートに使用されていない一意のグループの名前を入力します。

  • 式: データのグループ化に使用する式を入力します。

  • 親: 再帰的な階層のために親グループとして使用する式を入力します。

  • 見出しマップラベル: 見出しマップおよび検索機能に対して、この項目を表すラベルとして使用する式を入力します。

  • 色: 線に使用する色を、カラーピッカー、標準色、またはWebカラーから選択します。

  • 太さ: 線の太さを設定する値をポイント単位で入力します。

  • マーカーの色: カラーピッカー、標準色、またはWebカラーを使用し、終点のポイントマーカーに使用する色を選択します。

  • マーカーの表示: 線種がLineの場合、スパークライン上の終点でマーカーを表示するかどうかを選択します。

  • 最大幅: スパークラインの棒の最大幅を選択します。空白の場合、全ての列はグラフのサイズに合わせて表示します。

塗りつぶし

  • 塗りつぶしの色: スパークラインの線に設定する塗りつぶしの色を選択します。

  • グラデーションの種類: None、LeftRight、TopBottom、Center、DiagonalLeft、DiagonalRight、HorizontalCenter、VerticalCenterのオプションからグラデーションの種類を選択します。

  • グラデーションの終了色: スパークラインのグラデーションの終了に使用する色を選択します。

レンジ

  • 下限: 範囲の下限を示す値を選択するか、または式を入力します。

  • 上限: 範囲の上限を示す値を選択するか、または式を入力します。

  • 塗りつぶしの色: スパークラインの範囲に使用する色を選択します。 範囲は色付きの長方形で、許容可能な下限値と上限値を決定します。

  • グラデーションの種類: None、LeftRight、TopBottom、Center、DiagonalLeft、DiagonalRight、HorizontalCenter、VerticalCenterのオプションからグラデーションの種類を選択します。

  • グラデーションの終了色: スパークラインのグラデーションの終了に使用する色を選択します。

データ

  • データセット: Sparklineに関連付けるデータセットを選択します。ドロップダウンリストには、レポートのデータセットコレクションにあるすべてのデータセットが表示されます。

  • 並べ替えの式: データの並べ替えを行う場合、コレクションに式を追加します。[式]ボックスに、データの並べ替えに使用する式を入力し、[方向]オプションで並べ替えの方法を「昇順」、または「降順」に設定します。

  • フィルタ: データのフィルタリングを行う場合、コレクションにフィルタを追加します。コレクションに新しいフィルタを追加するには、次の3つの値を設定する必要があります。

    • 式: フィルタリングに使用する式を入力します。

    • 演算子: フィルタリングの方法を次の演算子から選択します。

      • Equal: 一致するデータが選択されます。
      • Like: 左側の値と右側の値が同様であるデータが選択されます。Like演算子の詳細情報については、MSDNを参照してください。
      • NotEqual: 一致しないデータが選択されます。
      • GreaterThan: 指定した値より大きな値のデータが選択されます。
      • GreaterThanOrEqual: 指定した値以上のデータが選択されます。
      • LessThan: 指定した値未満のデータが選択されます。
      • LessThanOrEqual: 指定した値以下のデータが選択されます。
      • TopN: 上位N番目までのデータが選択されます。
      • BottomN: 下位N番目までのデータが選択されます。
      • TopPercent: 累積合計が指定された割合以上になる、上位のデータが選択されます。
      • BottomPercent: 累積合計が指定された割合以上になる、下位のデータが選択されます。
      • In: 指定した値のリストに含まれるデータのみが選択されます。
      • Between: 指定した2つの値の間に入るデータが選択されます。
    • 値: 選択された演算子に基づいて左側の式と比較する値を入力します。Between演算子を選択した場合、2つの値ボックスが有効になります。In演算子を選択した場合、多くの値を入力することができます。

使用例

次の例では、目標値(秒単位で測定された時間)と比較してコールセンターのトレンドを視覚化する方法を示します。この例では、3つのSparklineコントロールを使用して、保留時間、通話時間、および放棄呼の3つの評価指標に応じてデータを表示します。

このようなレポートを作成するために、3つのSparklineコントロールをレポートに直接配置し、それらのプロパティを設定します。TextBoxコントロールを使用して、[保留時間][通話時間]、および[放棄呼]の評価指標を表示します。また、いくつかのTextBoxコントロールに式を使用して、各評価指標に対して実際の値を表示します。

メモ:この例ではレポートファイルに、以下のようなデータを埋め込み、使用します。

データソース

[

  {

    "TargetHoldTime": "60",
    "TargetDuration": "300",
    "TargetAbandonments": "200",

    "CallAverages": [
      {
        "Hour": "1",
        "AvgHoldTime": "54",
        "AvgCallDuration": "210",
        "Abandonments": "14"
      },
      {
        "Hour": "2",
        "AvgHoldTime": "52",
        "AvgCallDuration": "153",
        "Abandonments": "7"
      },
      {
        "Hour": "3",
        "AvgHoldTime": "56",
        "AvgCallDuration": "408",
        "Abandonments": "28"
      },
      {
        "Hour": "4",
        "AvgHoldTime": "63",
        "AvgCallDuration": "777",
        "Abandonments": "22"
      },
      {
        "Hour": "5",
        "AvgHoldTime": "65",
        "AvgCallDuration": "946",
        "Abandonments": "44"
      },
      {
        "Hour": "6",
        "AvgHoldTime": "55",
        "AvgCallDuration": "727",
        "Abandonments": "12"
      },
      {
        "Hour": "7",
        "AvgHoldTime": "52",
        "AvgCallDuration": "470",
        "Abandonments": "5"
      },
      {
        "Hour": "8",
        "AvgHoldTime": "55",
        "AvgCallDuration": "318",
        "Abandonments": "13"
      }
    ],

    "Capacity": "25",
    "Usage": "22",


    "CallCount": {
      "Totals": {
        "Hour": "347",
        "Day": "1665",
        "Month": "24975"
      },
      "Hourly": [
        {
          "Number": "1",
          "Count": "185"
        },
        {
          "Number": "2",
          "Count": "304"
        },
        {
          "Number": "3",
          "Count": "184"
        },
        {
          "Number": "4",
          "Count": "347"
        },
        {
          "Number": "5",
          "Count": "285"
        },
        {
          "Number": "6",
          "Count": "360"
        }
      ]
    },
    "OrderCount": {
      "Totals": {
        "Hour": "208",
        "Day": "960",
        "Month": "15360"
      },
      "Hourly": [
        {
          "Number": "1",
          "Count": "108"
        },
        {
          "Number": "2",
          "Count": "136"
        },
        {
          "Number": "3",
          "Count": "96"
        },
        {
          "Number": "4",
          "Count": "277"
        },
        {
          "Number": "5",
          "Count": "108"
        },
        {
          "Number": "6",
          "Count": "235"
        }
      ]
    },
    "CallSource": [
      {
        "Name": "United States",
        "Count": "5200"
      },
      {
        "Name": "Canada",
        "Count": "3000"
      },
      {
        "Name": "Australia",
        "Count": "612"
      },
      {
        "Name": "China",
        "Count": "654"
      },
      {
        "Name": "India",
        "Count": "646"
      },
      {
        "Name": "United Kingdom",
        "Count": "987"
      },
      {
        "Name": "Germany",
        "Count": "324"
      },
      {
        "Name": "Russia",
        "Count": "326"
      },
      {
        "Name": "Japan",
        "Count": "1322"
      },
      {
        "Name": "Austria",
        "Count": "213"
      },
      {
        "Name": "South Africa",
        "Count": "622"
      },
      {
        "Name": "Brazil",
        "Count": "321"
      },
      {
        "Name": "South Korea",
        "Count": "21"
      },
      {
        "Name": "Argentina",
        "Count": "213"
      },
      {
        "Name": "Spain",
        "Count": "321"
      },
      {
        "Name": "France",
        "Count": "564"
      },
      {
        "Name": "Italy",
        "Count": "216"
      },
      {
        "Name": "Ireland",
        "Count": "135"
      },
      {
        "Name": "Sweden",
        "Count": "143"
      },
      {
        "Name": "Finland",
        "Count": "195"
      }
    ]  
  }
]

最終的には次の画像のようなレポートとなります。

Use Case Diagram for Sparkline Control

  1. レポートのデザイン面上にTextBoxコントロールをドラッグ&ドロップし、[値]プロパティを「コールセンターダッシュボード:全体的なパフォーマンス」に設定します。これはレポートのタイトルになります。

  2. 3つのTextBoxコントロールをドラッグ&ドロップし、上下に並べて配置して、評価指標のラベルを表示します。

    コントロール名 設定値
    TextBox2 保留時間
    TextBox3 通話時間
    TextBox4 放棄呼
  3. [保留時間]テキストボックスの横にTextBoxコントロールをドラッグ&ドロップし、[値]プロパティを「=Last(Fields!AvgHoldTime.Value, "CallAverages"」に設定します。

  4. [通話時間]テキストボックスの横にTextBoxコントロールをドラッグ&ドロップし、[値]プロパティを「=Last(Fields!AvgCallDuration.Value, "CallAverages")」に設定します。

  5. 同様に、[放棄呼]テキストボックスの横にTextBoxコントロールをドラッグ&ドロップし、[値]プロパティを「=Last(Fields!Abandonments.Value, "CallAverages")」に設定します。

  6. TextBoxコントロールを右側の3つのTextBoxの上にドラッグ&ドロップし、[値]プロパティを「実際の値」に設定します。

  7. TextBoxコントロールをデザイン面上にドラッグ&ドロップし、「今日(目標値との比較)」に設定します。

  8. [保留時間]テキストボックスの横にSparklineコントロールをドラッグ&ドロップし、[名前]プロパティを「HoldTimeSparkline」に設定します。

  9. [プロパティ]タブで、HoldTimeSparklineに対して次のプロパティを設定します。

    プロパティ名 設定値
    系列値 =Fields!AvgHoldTime.Value / First(Fields!TargetHoldTime.Value, "Targets")
    下限 1
    上限 1.005
    レンジ > 表示 はい
    要素名 HoldTimeSparkline
    データセット CallAverages

    Sparkline Properties

  10. [通話時間]テキストボックスの横にSparklineコントロールをドラッグ&ドロップし、[名前]プロパティを「CallDurationSparkline」に設定します。

  11. CallDurationSparklineを選択して、次のプロパティを設定します。

    プロパティ名 設定値
    系列値 =Fields!AvgCallDuration.Value / First(Fields!TargetDuration.Value, "Targets")
    下限 1
    上限 1.005
    レンジ > 表示 はい
    要素名 CallDurationSparkline
    データセット CallAverages
  12. [放棄呼]テキストボックスの横にSparklineコントロールをドラッグ&ドロップし、[名前]プロパティを「AbandonedSparkline」に設定します。

  13. AbandonedSparklineを選択して、次のプロパティを設定します。

    プロパティ名 設定値
    系列値 =Fields!Abandonments.Value
    下限 1
    上限 1.005
    レンジ > 表示 はい
    要素名 AbandonmentsSparkline
    データセット CallAverages
  14. TextBoxコントロールを3つのSparklineコントロールの下にドラッグ&ドロップし、[値]プロパティを「秒単位で測定された時間」に設定します。

  15. レポートに配置する各コントロールのサイズや位置を調整して、レポートの外観をカスタマイズします。

  16. レポートをプレビューします。