製品版のみの機能
Javascript Excel - スパークラインの作業
このサンプルは Excel Engine のスパークラインを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
折れ線
柱状
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは Excel Engine のスパークラインを紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with Sparklines</title>
<!--<meta http-equiv="x-ua-compatible" content="IE=9">-->
<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" />
<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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.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.excel-bundled.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.spreadsheet-bundled.js"></script>
<!-- saving worksheet -->
<script src="https://www.igniteui.com/js/external/FileSaver.js"></script>
</head>
<body>
<style>
.sl-layout-container {
margin: 0px 20px 10px 0px;
width: 15%;
float: left;
}
@media screen and (max-width: 500px) {
.sl-layout-container {
width: 80%;
min-width: 200px;
}
}
</style>
<!-- Target elements for the igSparklines -->
<div>
<div class="sl-layout-container">
<p>折れ線</p>
<div id="lineSparkline"></div>
<p>柱状</p>
<div id="columnSparkline"></div>
<p><div>
<input class="spreadsheet-sample-btn" id="createWorkbookBtn" type="button" value="ワークブックを生成" onclick="createWorkbook()">
</p></div>
</div>
</div>
<script>
var data = [4, 5, 2, 7, -1, 3, 0, 5, 2, 6]
$(function () {
$("#lineSparkline").igSparkline({
dataSource: data,
displayType: "line",
height: "100px",
width: "100%",
brush: "#376092",
});
$("#columnSparkline").igSparkline({
dataSource: data,
displayType: "column",
height: "100px",
width: "100%",
brush: "#376092",
});
});
function createWorkbook() {
var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
var sheet1 = workbook.worksheets().add('Sparklines');
var sheet2 = workbook.worksheets().add('Data');
sheet1.columns(0).width(10000);
sheet1.rows(0).height(3000);
sheet1.rows(1).height(3000);
var letters = ["A"]
var headers = ["Data"]
for (var i = 0; i < letters.length; i++) {
for (var j = 1; j < data.length + 2; j++) {
var str = letters[i] + (j).toString();
var cell = sheet2.getCell(str);
if (j == 1) {
cell.value(headers[i]);
}
else {
if (i == 0) {
cell.value(data[j - 2]);
}
}
}
}
sheet1.sparklineGroups().add($.ig.excel.SparklineType.line, "Sparklines!A1:A1", "Data!A2:A11");
sheet1.sparklineGroups().add($.ig.excel.SparklineType.column, "Sparklines!A2:A2", "Data!A2:A11");
saveWorkbook(workbook, "Sparklines.xlsx");
}
function saveWorkbook(workbook, name) {
workbook.save({ type: 'blob' }, function (data) {
saveAs(data, name);
}, function (error) {
alert('エクスポート エラー: : ' + error);
});
}
</script>
</body>
</html>