製品版のみの機能
データ チャート - チャート塗りつぶしのグラデーション
このサンプルでは、チャート コントロールで線状グラデーション カラーを使用する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
天気のデータ ソース:
NOAA
NOAA
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chart Fill Gradients</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" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/modules/infragistics.ui.chart.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>
</head>
<body>
<style>
/* Use the following css classes to apply gradients through CSS for the series fill */
/* As many palettes can be defined as needed */
/*.ui-chart-fill-palette-1 {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
.ui-chart-fill-palette-2 {
background-image: linear-gradient(to right, violet, indigo,blue, green, yellow, orange, red);
}*/
/*Use the following css classes to apply gradients through CSS for the series fill*/
/*.ui-chart-outline-palette-1 {
background-image: linear-gradient(90deg, green 10%, blue 80%);
}
.ui-chart-outline-palette-2 {
background-image: linear-gradient(180deg, red 30%, blue 50%);
}*/
</style>
<script type="text/javascript" src="/data-files/wind.js"></script>
<script type="text/javascript">
$(function () {
$("#chart").igDataChart({
width: "100%",
height: "400px",
dataSource: data,
title: "ロサンゼルスの風データ (12 時間)",
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
axes: [{
name: "xAxis",
type: "categoryX",
label: "Time"
},
{
name: "yAxis",
type: "numericY",
maximumValue: 10,
title: "風速 (mph)",
}],
series: [{
brush: {
type: "linearGradient",
colorStops: [{
color: "#2788B1",
offset: 0
},
{
color: "#A4BA29",
offset: 0.3
},
{
color: "#FDBD48",
offset: .6
},
{
color: "#D3404B",
offset: .9
}],
// optional:
startPoint: { x: 0, y: 1 },
endPoint: { x: 0, y: 0 }
// if start/endPoint are not specified, the default direction is top-bottom
},
outline: {
type: "linearGradient",
colorStops: [{
color: "#2788B1",
offset: 0
},
{
color: "#A4BA29",
offset: 0.3
},
{
color: "#FDBD48",
offset: .6
},
{
color: "#D3404B",
offset: .9
}],
startPoint: { x: 0, y: 1 },
endPoint: { x: 0, y: 0 }
},
areaFillOpacity: .9,
name: "series1",
type: "splineArea",
xAxis: "xAxis",
yAxis: "yAxis",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
valueMemberPath: "WindSpeed"
}],
});
});
</script>
<div id="chart"></div>
<div class="NOAAdata-attribution">
天気のデータ ソース:<br />
<a href="http://www.noaa.gov/" target="_blank">NOAA</a>
</div>
</body>
</html>
/*
Raw Data from NOAA.
Wind information from Los Angeles weather station.
*/
var data = [
{ "Date": 2013 - 07 - 16, "Time": "10:00", "WindSpeed": 3.305, "WindDirection": 141, id: 0 },
{ "Date": 2013 - 07 - 16, "Time": "11:00", "WindSpeed": 5.832, "WindDirection": 181, id: 1 },
{ "Date": 2013 - 07 - 16, "Time": "12:00", "WindSpeed": 5.637, "WindDirection": 179, id: 2 },
{ "Date": 2013 - 07 - 16, "Time": "13:00", "WindSpeed": 8.747, "WindDirection": 196, id: 3 },
{ "Date": 2013 - 07 - 16, "Time": "14:00", "WindSpeed": 8.553, "WindDirection": 208, id: 4 },
{ "Date": 2013 - 07 - 16, "Time": "15:00", "WindSpeed": 7.581, "WindDirection": 207, id: 5 },
{ "Date": 2013 - 07 - 16, "Time": "16:00", "WindSpeed": 7.775, "WindDirection": 211, id: 6 },
{ "Date": 2013 - 07 - 16, "Time": "17:00", "WindSpeed": 6.026, "WindDirection": 214, id: 7 },
{ "Date": 2013 - 07 - 16, "Time": "18:00", "WindSpeed": 6.803, "WindDirection": 208, id: 8 },
{ "Date": 2013 - 07 - 16, "Time": "19:00", "WindSpeed": 0.583, "WindDirection": 236, id: 9 },
{ "Date": 2013 - 07 - 16, "Time": "20:00", "WindSpeed": 6.609, "WindDirection": 307, id: 10 },
{ "Date": 2013 - 07 - 16, "Time": "21:00", "WindSpeed": 0.000, "WindDirection": 357, id: 11 }
];