Wijmo UI for the Web
グリッドに追加
Wijmo ユーザーガイド > ウィジェット > SparkLine > 操作手順 > グリッドに追加
全て展開全て展開
すべて折りたたむすべて折りたたむ

「クイックスタート」の例を基に、wijgrid の columns オブジェクトの cellFormatter 関数を使用して、多数の wijsparkline から成るグリッドにスパークラインを置換できます。

  1. HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、cellFormatter 関数を使用して、3 列目、4 列目、および 5 列目にスパークラインウィジェットを追加します。 
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline", "wijmo.wijgrid"], function () {
$(document).ready(function () {
    var gridData = [{
        year: 2008,
        totalSales: 2019802,
        sales: [95, 87, 103, 75, 91, 66, 112, 90, 83, 65, 99, 87],
        profit: [12, 5, 23, 0, 8, -10, 30, 7, -3, -13, 14, 6],
        share: [0.72, 0.75, 0.83, 0.74, 0.81, 0.64, 0.63, 0.79, 0.88, 0.61, 0.64, 0.76]
    },
    {
        year: 2009,
        totalSales: 1865424,
        sales: [69, 76, 82, 92, 120, 102, 110, 95, 88, 75, 96, 107],
        profit: [-15, -6, 3, 12, 27, 12, 19, 8, 4, -7, 3, 12],
        share: [0.62, 0.85, 0.81, 0.77, 0.69, 0.74, 0.68, 0.71, 0.78, 0.81, 0.74, 0.86]
    },
    {
        year: 2010,
        totalSales: 3006589,
        sales: [75, 87, 92, 74, 89, 69, 101, 92, 97, 85, 94, 112],
        profit: [0, 12, 18, -1, 7, -12, 23, 17, 19, 5, 15, 25],
        share: [0.77, 0.63, 0.71, 0.87, 0.79, 0.67, 0.78, 0.71, 0.87, 0.91, 0.74, 0.81]
    },
    {
        year: 2011,
        totalSales: 2662158,
        sales: [88, 87, 106, 95, 91, 78, 124, 108, 93, 85, 103, 85],
        profit: [7, 5, 25, 12, 10, -5, 35, 29, -3, -10, 14, 4],
        share: [0.73, 0.73, 0.78, 0.69, 0.87, 0.80, 0.88, 0.76, 0.77, 0.83, 0.71, 0.85]
    },
    {
        year: 2012,
        totalSales: 3165412,
        sales: [86, 97, 112, 75, 81, 63, 89, 94, 83, 77, 120, 103],
        profit: [3, 15, 33, -15, -3, -20, 4, 12, 0, -3, 28, 19],
        share: [0.79, 0.75, 0.83, 0.69, 0.77, 0.82, 0.68, 0.73, 0.74, 0.86, 0.73, 0.75]
    },
    {
        year: 2013,
        totalSales: 3326566,
        sales: [105, 107, 103, 95, 111, 86, 123, 135, 101, 95, 91, 117],
        profit: [22, 25, 20, 12, 27, 6, 32, 39, 19, 13, 9, 26],
        share: [0.82, 0.85, 0.73, 0.67, 0.79, 0.80, 0.78, 0.83, 0.74, 0.89, 0.83, 0.78]
    }];
    $("#sparklineInGrid").wijgrid({
        selectionMode: "none",
        highlightOnHover: false,
        data: gridData,
        columnsAutogenerationMode: "none",
        columns: [
            { dataKey: "year", headerText: "Year",  textAlignment: "center" },
            { dataKey: "totalSales", headerText: "Totals", dataType: "currency", dataFormatString: "c0" },
            {
                dataKey: "sales", headerText: "Sales", 
                cellFormatter: function (args) {
                    if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                        var salesSparkline = $("<div></div>")
                            .css({
                                height: 40,
                                width: 200
                            });
                        args.$container.empty()
                            .append(salesSparkline);
                        salesSparkline.wijsparkline({
                            data: args.row.data.sales
                        });
                        return true;
                    }
                }
            },
            {
                dataKey: "profit", headerText: "Profit", 
                cellFormatter: function (args) {
                    if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                        var profitSparkline = $("<div></div>")
                            .css({
                                height: 40,
                                width: 200
                            });
                        args.$container.empty()
                            .append(profitSparkline);
                        profitSparkline.wijsparkline({
                            type: "column",
                            valueAxis: true,
                            data: args.row.data.profit
                        });
                        return true;
                    }
                }
            },
            {
                dataKey: "share", headerText: "Share",
                cellFormatter: function (args) {
                    if (args.row.type & $.wijmo.wijgrid.rowType.data) {
                        var profitSparkline = $("<div></div>")
                            .css({
                                height: 40,
                                width: 200
                            });
                    args.$container.empty()
                        .append(profitSparkline);
                    profitSparkline.wijsparkline({
                        type: "area",
                        data: args.row.data.share
                    });
                    return true;
                }
            }
        }]
    });
});
});
</script>
  2. HTML ファイルの <body> セクションでは、
    <div> タグを <table> タグに変更して、グリッドウィジェットを作成します。
    マークアップ
    コードのコピー 
    <table id="sparklineInGrid" />
  3. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、グリッドの右端 3 列を使用して複数のスパークラインが表示されています。

関連トピック

Grid
SparkLine
wijsparkline メソッド
data フィールド
type フィールド
valueAxis フィールド
wijgrid メソッド
IColumn インターフェース
cellFormatter フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.