製品版のみの機能
カテゴリ チャート - 概要
igCategoryChart は、igDataChart を簡素化した HTML5 コントロールです。チャートは、シンプルで直感的な API を使用したカテゴリ データの表示を簡単に設定できます。データ (データ オブジェクトの配列またはデータ オブジェクトの配列の配列) をバインドすると後の処理はチャートがすべて行います。このチャートには多数の機能が含まれます。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
以下のコンボを使用してカテゴリ チャート タイプを変更します。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは、カテゴリ チャートで作成できるチャート タイプを紹介します。
コード ビュー
クリップボードへコピー
var data = [
{ "Year": "1995", "China": 1297, "India": 920, "United States": 266 },
{ "Year": "2005", "China": 1216, "India": 1090, "United States": 295 },
{ "Year": "2010", "China": 1271, "India": 1131, "United States": 314 },
{ "Year": "2015", "China": 1361, "India": 1251, "United States": 322 },
{ "Year": "2020", "China": 1381, "India": 1341, "United States": 342 },
{ "Year": "2025", "China": 1394, "India": 1466, "United States": 361 }
];
var ChartTypes = [
{ "ChartType": "column" },
{ "ChartType": "point" },
{ "ChartType": "line" },
{ "ChartType": "spline" },
{ "ChartType": "splineArea" },
{ "ChartType": "area" },
{ "ChartType": "stepLine" },
{ "ChartType": "stepArea" },
{ "ChartType": "auto" },
];
// CODE SNIPPET
$("#chart").igCategoryChart({
dataSource: data,
chartType: "column",
});
// CODE SNIPPET
$("#chart").igCategoryChart({ title: "国別人口" });
$("#chart").igCategoryChart({
yAxisFormatLabel: function (value) {
return value + " M";
}
});
$("#chartTypePicker").igCombo({
dataSource: ChartTypes,
mode: "dropdown",
valueKey: "ChartType",
textKey: "ChartType",
placeHolder: "チャート タイプの選択",
dropDownOnFocus: true,
initialSelectedItems: [ { index: 0 } ],
selectionChanged: function (evt, ui) {
var type = $("#chartTypePicker").igCombo("value");
$("#chart").igCategoryChart("option", "chartType", type);
if (type == "column" || type == "auto")
$("#chart").igCategoryChart("option", "markerTypes", [ "none" ]);
else
$("#chart").igCategoryChart("option", "markerTypes", ["circle"]);
}
});
<div style="font-size:17px;">以下のコンボを使用してカテゴリ チャート タイプを変更します。</div>
<select id="chartTypePicker">
</select>
<br /><br />
<div id="chart" style="width:800px;height:400px"></div>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Category Chart Types</title>
<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 CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div style="font-size:17px;">以下のコンボを使用してカテゴリ チャート タイプを変更します。</div>
<select id="chartTypePicker" >
</select>
<br /><br />
<div id="chart" style="width:800px;height:400px"></div>
<script type="text/javascript">
var data = [
{ "Year": "1995", "China": 1297, "India": 920, "United States": 266 },
{ "Year": "2005", "China": 1216, "India": 1090, "United States": 295 },
{ "Year": "2010", "China": 1271, "India": 1131, "United States": 314 },
{ "Year": "2015", "China": 1361, "India": 1251, "United States": 322 },
{ "Year": "2020", "China": 1381, "India": 1341, "United States": 342 },
{ "Year": "2025", "China": 1394, "India": 1466, "United States": 361 }
];
var ChartTypes = [
{ "ChartType": "column" },
{ "ChartType": "point" },
{ "ChartType": "line" },
{ "ChartType": "spline" },
{ "ChartType": "splineArea" },
{ "ChartType": "area" },
{ "ChartType": "stepLine" },
{ "ChartType": "stepArea" },
{ "ChartType": "auto" },
];
$(function () {
// CODE SNIPPET
$("#chart").igCategoryChart({
dataSource: data,
chartType: "column",
});
// CODE SNIPPET
$("#chart").igCategoryChart({ title: "国別人口" });
$("#chart").igCategoryChart({
yAxisFormatLabel: function (value) {
return value + " M";
}
});
$("#chartTypePicker").igCombo({
dataSource: ChartTypes,
mode: "dropdown",
valueKey: "ChartType",
textKey: "ChartType",
placeHolder: "チャート タイプの選択",
dropDownOnFocus: true,
initialSelectedItems: [ { index: 0 } ],
selectionChanged: function (evt, ui) {
var type = $("#chartTypePicker").igCombo("value");
$("#chart").igCategoryChart("option", "chartType", type);
if (type == "column" || type == "auto")
$("#chart").igCategoryChart("option", "markerTypes", [ "none" ]);
else
$("#chart").igCategoryChart("option", "markerTypes", ["circle"]);
}
});
});
</script>
</body>
</html>