HTML5 Sparkline Chart for Data-Intense Visualizations

「強烈でシンプルな、単語サイズのグラフィック」と表現されるスパークラインは、単純な線を超えています。

Damyan Petev Last Updated Feb 25, 2025 8min read

これは、通常のチャートを縮小して簡略化したバージョンで、多くのデータをすばやく分析し、トレンドを見つけるのに最適です。もっと興味がある人のために、スパークラインの発明者は、スパークラインの理論と実践に関するQ&Aボードを主催しており、一般的な「すべきこと」と「してはいけないこと」や、スパークラインが役に立ったと感じたさまざまなシナリオを見つけることができます。さらに詳しく知りたい場合は、Excel ブログのスパークラインに関する非常に視覚的に豊富なブログもあります。典型的な例は「テキストとのインライン」ですが、グリッドの一部として役立つケースが複数あります。少なくとも私が見てきた限りでは、私はこの用語を、線や面だけでなく、軸、範囲、マーカー、傾向線の有無にかかわらず、柱や棒など、あらゆる種類の小さな視覚化の同義語として受け入れています。データチャートに搭載されているスイッチやノブが多すぎるわけではありませんが、小型に保ちながらデータ集約型にすることができます。注意点として、これらのチャートは依然としてシンプルであることを意図しており、たとえ 1 つに余分な情報をすべて表示できたとしても、それが常に最良のデザインであるとは限りません。

The Ignite UI Sparkline

一連のデータ視覚化コントロールがIgnite UI製品(強力なデータチャート、次に地理マップであるPie)に登場した後、C#からjQueryに変換された地理マップは、さらに拡張するのが論理的でした。スパークラインは、HTML5 Canvas ルートをたどる別のコントロールの波の一部であり、プラグインはなく、ほとんどのモバイルデバイスで利用できます。この特定のチャートは軽量になるように設計されているため、4つの表示タイプでサポートされている単一のシリーズと、限られた量のラベル付けなどの単一の軸セットなど、余分なかさばりを期待しないでください。

デフォルトはラインシリーズです。

$("#Spark0").igSparkline({
    displayType: "line",
    dataSource: employees,
    valueMemberPath: "SickLeaveHours",
    height: "50px",
    width: "50%",
    normalRangeMaximum: 49,
    normalRangeMinimum: 45,
    normalRangeVisibility: "visible",
    verticalAxisVisibility: "visible",
    highMarkerVisibility: "visible",
    lowMarkerVisibility: "visible"
});

線を領域に、マーカーを別の軸に交換します。

傾向線を持つ列系列:

and Win / Loss :

縦軸と上の列と同じデータを示す「exponentialAverage」トレンドラインによる勝敗

どちらの棒グラフも同じデータを使用します。 違いは、勝敗はブールスケールであり、提示されたポイントが値と一致しないことを意味します - それは完全な利益、完全な損失、またはニュートラルのいずれかです。

マーカーには数種類と13種類のトレンドラインがあり、すべてのビジュアルを含む非常に優れたigSparklineの概要記事があるので、このコントロールが提供するものをすべて見ていない場合に備えて、完全にチェックする必要があります。もちろん、リンク先の記事でお気づきのように、スパークラインは主にインラインを対象としており、上記のものはやや大きいです。少し調整することで、インラインでも動作させることができます。

CSS を微調整し (インライン、境界線と背景を削除)、サイズを縮小してテキストと一緒に表示するスパークライン

これはすべて、非常に小さなスペースに押しつぶされた非常に大量のデータを意味のある視覚化し、それを最大限に活用するという名目で行われています。したがって、はい、テキストとのインラインは素晴らしく、そのようなグラフが単一のセルで別のテーブル全体の「要点」を提供し、読みやすくするグリッドセル内も同様です。それについては、フォローアップブログで詳しく説明します。

ヒントとコツ

そこで、興味深く役立つと思われるさまざまなものがここにあります。たとえば、値とメンバーパスはオプションであるという事実のように、データソースは数値の単純な配列にすることができ、値パスを指定する必要はありません。ラベルパスは、軸を表示する場合にのみ必要です。

データを美しくする:スタイリングガイド

さらに別の興味深いトピックは、まだデータ視覚化コントロールであり、Webを対象としているためです。だから、私はあなたがテーマとおそらく他のいくつかのコントロールのためのスタイリングigDataChartを最も見たことを願っています、そしてあなたがSparklineが同じことができるかどうか疑問に思っているなら...なぜそうですか、はい、できます!そして、このコントロールの外観を変更するために使用できる CSS クラスの素晴らしいリストがここにあります。

すべてのクラスには "ui-sparkline-" というプレフィックスが付き、それらが適用されるもの ("sparkpath"、"negativesparkpath"、"trendline"、"markers"、"firstmarker"、"lastmarker"、"highmarker"、"lowmarker"、"negativemarkers"、"range" など) が記載されています。たとえば、スパークパス、高マーカーと低マーカーがあるとします。

CSS スパークラインクラスがビジュアル要素のオプションにどのようにマップされるかの表現

CSS の背景色と CSS の不透明度 (指定した場合) は、問題の要素のブラシの色にマッピングされます。境界線の幅 (および幅のみ、この例が省略形宣言を示しているかどうかに関係なく) は、ブラシサイズに対応します。高いマーカーが低いマーカーよりも大きいことがわかるほど見えると思います。ほとんどすべての最小値は 1.5px で、より低い値は無視されるだけであることに注意してください。すべてのマーカー、線、範囲に値を使用できます。

/* "background-color", "opacity", "border-width" apply */
.ui-sparkline-sparkpath {
    background:#00AADE;
    border:1.5px solid
}
.ui-sparkline-negativesparkpath {
    background:#D0284C;
    border:1px solid
}
.ui-sparkline-trendline {
    background:#555;
    border:2px solid
}
.ui-sparkline-markers {
    background:#36C0F3;
    border:3px solid
}
.ui-sparkline-firstmarker {
    background:#19994F;
    border:5px solid
}
.ui-sparkline-lastmarker {
    background:#FCB025;
    border:5px solid
}
.ui-sparkline-highmarker {
    background:#BFE107;
    border:4px solid
}
.ui-sparkline-lowmarker {
    background:#AF39FF;
    border:3px solid
}
.ui-sparkline-negativemarkers {
    background:#E5516F;
    border:3px solid
}
.ui-sparkline-range {
    background:gray;
    opacity:.2
}

列に関しては、パスは明らかに塗りつぶしとしても適用されます。軸については、少し異なるルールがあります–境界線は、今回は色も考慮された軸のストロークに対応し、明らかに背景はありませんが、軸ラベルのフォントと色が使用されます。

/* "border-width", "border-color", "color", "font" apply */
.ui-sparkline-axis-x {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D
}
.ui-sparkline-axis-y {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D;
}

重要な注意点は、これらのクラスは API に表示される制御オプションに対応していますが、初期化時に考慮されるということです。ですから、ビジュアルと機能性の関心事を分離するのは良いことです。デザイナーに私よりも🙂良い色を選択させます。ただし、実行時に外観を変更したい場合は、jQueryオプションを使用する必要があります。

雑貨

スニペットでお気づきかもしれませんが、スパークラインの幅はパーセンテージで設定でき、他のIgnite UIチャートと同様に、サイズ変更の処理が組み込まれています。つまり、このチャートはレスポンシブデザインに適しており、さまざまなサイズの要素を含む内部でもうまく機能し、チャートをグリッドセルとして試すときに重要な役割を果たします。

また、最も理にかなっているシナリオは(私のデモの悪いデータに関係なく)傾向を分析するためのものであり、これは連続性と通常は時間制限のある軸を意味し、JavaScriptの日付のデフォルトの文字列出力の地獄は誰もが知っています。このような小さなグラフにはまったく適していませんが、簡単な機能を使用してラベルを好みに合わせてフォーマットできます。パラメータとして「would've-been」値を受け取り、代わりに目的の新しいラベル値を返す必要があります。このイベントは複数回発生する可能性があり、おそらく複数回発生し、他の軸 (1 つ表示されている場合) に対しても発生することに注意してください - その場合は、正しい値をフォーマットしているかどうかを常に確認してください。そして最後にもう一つ、日付値は、到達時にすでに文字列に変換されているため、次のようになります。

$("#Spark1").igSparkline({
    labelMemberPath: "HireDate",
    verticalAxisVisibility: "visible",
    horizontalAxisVisibility: "visible",
    formatLabel : function formatFunction(val) {
        if (typeof val === "string") {
            // remove time from the label
            val = val.split("T")[0];
        }
        return val;
    }
    //...
});

クロージング&リソース

上記の情報がお役に立てば幸いです。さまざまな種類のスパークラインビジュアル、インライン設定、初期化、ツールチップイベント処理、スタイル設定の例を含むデモへのリンクが以下にあります。この情報に基づいてもう 1 つの投稿が間もなく公開される予定ですので、それも注目してください。

スパークラインの理論と実践は、適切な使用法に興味があり、アイデアを探しているすべての人にとって必読です
Sparklines in the Excel Blogs has some more good scenarios
Ignite UIスパークラインに関するドキュメントには、このチャートのすべての要素の視覚的な参照が記載されています
サンプルで実際の動作をご覧ください
MVCヘルパー/ jQuery定義が混在するASP.NET MVCデモ
JSFiddleを使用して、上記のほとんどの内容をすばやく表示できます
あなたのものを入手してください:

ご意見をお聞かせくださいので、以下にコメントを残してください@DamyanPetev。

そしていつものように、あなたはTwitterで私たちをフォローすることができます@Infragistics連絡を取り合うフェイスブック,Google+のそしてLinkedInの!

操作方法