製品版のみの機能
ドーナツ型チャート - 「その他」カテゴリ
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
得点トップ 5 プレーヤー
2012 年 - 2013 年
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、JSON データにバインドされたドーナツ型チャートに「その他」カテゴリのオプションを構成する方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html> <html> <head> <title></title> <!-- Ignite UI for jQuery Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script> <script src="/data-files/footballers.js"></script> </head> <body> <div style="text-align: center; width: 100%; font:16px Arial, Helvetica, sans-serif;">得点トップ 5 プレーヤー</div> <div style="margin: 10px 0; text-align: center; width: 100%; font:12px Arial, Helvetica, sans-serif;">2012 年 - 2013 年</div> <!-- Target element for the igDoughnutChart --> <div id="chart"></div> <script> $(function () { $("#chart").igDoughnutChart({ width: "100%", height: "550px", series: [ { name: "Pop2025", labelMemberPath: "name", valueMemberPath: "goals", dataSource: dataSource.sort(function (a, b) { return a.goals - b.goals; }), othersCategoryType: "number", othersCategoryThreshold: 15, labelsPosition: "bestFit", othersCategoryText: "15 得点未満のプレーヤー", formatLabel: function (context) { if (context.isOthersSlice) return "15 得点未満のプレーヤー"; return context.item.name + " (" + context.item.goals + ")"; } } ] }); }); </script> </body> </html>
var dataSource = [ { name: "Messi", team: "Barcelona", age: 26, number: 10, position: "FW", goals: 60, assists: 16, yellow: 2, red: 0, salary: 26.5 }, { name: "C. Ronaldo", team: "Real Madrid", age: 28, number: 7, position: "LW", goals: 55, assists: 12, yellow: 13, red: 1, salary: 25 }, { name: "Villa", team: "Atletico Madrid", age: 26, number: 7, position: "FW", goals: 16, assists: 5, yellow: 1, red: 0, salary: 12 }, { name: "Benzema", team: "Real Madrid", age: 25, number: 9, position: "CF", goals: 33, assists: 19, yellow: 0, red: 0, salary: 10 }, { name: "Fabregas", team: "Barcelona", age: 26, number: 10, position: "FW", goals: 43, assists: 16, yellow: 2, red: 0, salary: 14 }, { name: "Di Maria", team: "Real Madrid", age: 28, number: 22, position: "RW", goals: 9, assists: 13, yellow: 5, red: 2, salary: 8 }, { name: "Xavi", team: "Barcelona", age: 26, number: 7, position: "CM", goals: 16, assists: 5, yellow: 1, red: 0, salary: 14 }, { name: "Ozil", team: "Real Madrid", age: 25, number: 9, position: "AM", goals: 33, assists: 19, yellow: 0, red: 0, salary: 10 }, { name: "Iniesta", team: "Barcelona", age: 26, number: 8, position: "CM", goals: 6, assists: 20, yellow: 4, red: 0, salary: 12.5 }, { name: "Ramos", team: "Real Madrid", age: 27, number: 4, position: "CB", goals: 5, assists: 1, yellow: 14, red: 2, salary: 9 }, { name: "Neymar", team: "Barcelona", age: 21, number: 11, position: "FW", goals: 43, assists: 15, yellow: 3, red: 1, salary: 20 }, { name: "Isco", team: "Real Madrid", age: 21, number: 23, position: "AM", goals: 13, assists: 12, yellow: 4, red: 0, salary: 19 }, { name: "Pedro", team: "Barcelona", age: 26, number: 7, position: "FW", goals: 10, assists: 7, yellow: 6, red: 0, salary: 13 }, { name: "Iker", team: "Real Madrid", age: 32, number: 1, position: "GK", goals: 0, assists: 0, yellow: 1, red: 0, salary: 16 }, { name: "Valdes", team: "Barcelona", age: 31, number: 1, position: "GK", goals: 0, assists: 0, yellow: 12, red: 1, salary: 14 }, { name: "Higuain", team: "Napoli", age: 25, number: 9, position: "FW", goals: 9, assists: 13, yellow: 5, red: 1, salary: 8 }, { name: "Puyol", team: "Barcelona", age: 35, number: 4, position: "CB", goals: 2, assists: 0, yellow: 5, red: 0, salary: 18 }, { name: "Kaka", team: "Real Madrid", age: 31, number: 8, position: "AM", goals: 5, assists: 5, yellow: 1, red: 2, salary: 15 }, { name: "Sergio", team: "Barcelona", age: 25, number: 16, position: "CM", goals: 1, assists: 2, yellow: 11, red: 1, salary: 13.5 }, { name: "Alonso", team: "Real Madrid", age: 31, number: 14, position: "CM", goals: 8, assists: 0, yellow: 18, red: 0, salary: 14 }, { name: "Courtois", team: "Atletico Madrid", age: 20, number: 14, position: "GK", goals: 0, assists: 0, yellow: 0, red: 0, salary: 7 }, { name: "Koke", team: "Atletico Madrid", age: 21, number: 6, position: "MF", goals: 3, assists: 0, yellow: 0, red: 0, salary: 9 }, { name: "Falcao", team: "Monaco", age: 29, number: 9, position: "FW", goals: 21, assists: 5, yellow: 3, red: 0, salary: 24 }, { name: "Neuer", team: "Bayern Munich", age: 27, number: 1, position: "GK", goals: 0, assists: 0, yellow: 2, red: 0, salary: 12 }, { name: "Ribery", team: "Bayern Munich", age: 30, number: 7, position: "LW", goals: 11, assists: 23, yellow: 4, red: 1, salary: 16 }, { name: "Schweinsteiger", team: "Bayern Munich", age: 29, number: 31, position: "CM", goals: 9, assists: 15, yellow: 10, red: 0, salary: 17 }, { name: "Lewandowski", team: "Borussia Dortmund", age: 24, number: 9, position: "CF", goals: 36, assists: 9, yellow: 5, red: 0, salary: 12 }, { name: "Reus", team: "Borussia Dortmund", age: 24, number: 11, position: "FW", goals: 19, assists: 11, yellow: 1, red: 0, salary: 8 }, { name: "Gotze", team: "Bayern Munich", age: 24, number: 11, position: "FW", goals: 16, assists: 16, yellow: 3, red: 0, salary: 15 }, { name: "Balotelli", team: "Milan", age: 23, number: 45, position: "FW", goals: 15, assists: 5, yellow: 3, red: 0, salary: 12 }, { name: "Buffon", team: "Juventus", age: 23, number: 1, position: "GK", goals: 0, assists: 0, yellow: 0, red: 0, salary: 12 }, { name: "Pirlo", team: "Juventus", age: 34, number: 21, position: "MF", goals: 8, assists: 18, yellow: 7, red: 0, salary: 11 }, { name: "Torres", team: "Chelsea", age: 29, number: 9, position: "FW", goals: 22, assists: 8, yellow: 0, red: 0, salary: 12 }, { name: "Mata", team: "Chelsea", age: 25, number: 10, position: "MF", goals: 20, assists: 18, yellow: 4, red: 0, salary: 15 }, { name: "Lampard", team: "Chelsea", age: 34, number: 8, position: "MF", goals: 17, assists: 10, yellow: 4, red: 0, salary: 17 }, { name: "Hazard", team: "Chelsea", age: 22, number: 17, position: "MF", goals: 13, assists: 18, yellow: 1, red: 1, salary: 14 }, { name: "Oscar", team: "Chelsea", age: 21, number: 11, position: "MF", goals: 12, assists: 6, yellow: 6, red: 0, salary: 10 }, { name: "Ramires", team: "Chelsea", age: 26, number: 7, position: "MF", goals: 9, assists: 18, yellow: 7, red: 0, salary: 11 }, { name: "Luiz", team: "Chelsea", age: 26, number: 4, position: "CB", goals: 7, assists: 1, yellow: 16, red: 0, salary: 12 }, { name: "Silva", team: "PSG", age: 28, number: 2, position: "DF", goals: 1, assists: 1, yellow: 10, red: 1, salary: 14 }, { name: "Berbatov", team: "Fulham", age: 32, number: 9, position: "FW", goals: 15, assists: 7, yellow: 4, red: 0, salary: 12 } ]