カテゴリー
【Sass実践勉強会】cssだけで折れ線チャートを描く方法
※ 当ページには【広告/PR】を含む場合があります。
2021/06/05
基礎の基礎〜linear-gradientで斜線を1本引く
「単色で極端に狭いグラディエーション」
.psudo-line-rt {
margin: 0;
padding: 0;
width: 300px;
height: 200px;
background-image: linear-gradient(to right top, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%);
}
.psudo-line-lt {
margin: 0;
padding: 0;
width: 300px;
height: 200px;
background-image: linear-gradient(to left top, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%);
}
<div class="psudo-line-rt"></div>
<div class="psudo-line-lt"></div>
.psudo-line-h {
margin: 0;
padding: 0;
width: 300px;
height: 3px;
background: black;
}
.psudo-line-v {
margin: 0;
padding: 0;
width: 3px;
height: 200px;
background: black;
}
<div class="psudo-line-h"></div>
<div class="psudo-line-v"></div>
より実用的な折れ線チャートの作成
linear-gradientによる折れ線チャートは使いものにならない折角なのでScssコードを付けます
@use 'sass:math';
$raw_ydata: [
1,4,5,6,7,6,2,3,4,8,
3,3,2,1,2,7,4,6,3,2,
4,3,4,5,6,1,2,4,9,6,
6,5,3,8,6,5,0,6,5,4,
2,3,5,8,5,6,6,3,2,1,
6,3,2,8,6,3,2,0,9,4,
4,3,2,1,2,5,7,6,4,2,
6,7,9,3,4,1,2,7,4,6,
0,9,6,4,5,8,4,6,9,2,
5,2,0,5,4,8,7,2,1,4
];
@mixin generic_line(
$line_index,
$chart_width: 600px,
$chart_height: 200px,
$rect_width: 6px,
$line_width: 2px,
$data
) {
.line-#{$line_index - 1} {
position: absolute;
margin: 0;
padding: 0;
left: $rect_width * ($line_index - 1);
width: $rect_width;
top: $chart_height * (1 - nth($data, $line_index + 1) / 10);
$diff: nth($data, $line_index + 1) - nth($data, $line_index);
$rect_height: $chart_height * abs($diff) / 10;
height: $rect_height;
$ratio1: $line_width/$rect_height;
$ratio2: $rect_height/$chart_height;
$ratio3: $chart_width/$chart_height;
$line_ratio: $line_width / 1px * $ratio2 * $ratio1 * 100%;
$former_pos: 50% - ($line_ratio / 2);
$latter_pos: 50% + ($line_ratio / 2);
@if $diff > 0 {
background-image: linear-gradient(to left top, transparent $former_pos, black $former_pos, black $latter_pos, transparent $latter_pos);
} @else if $diff < 0 {
top: $chart_height * (1 - nth($data, $line_index) / 10);
background-image: linear-gradient(to right top, transparent $former_pos, black $former_pos, black $latter_pos, transparent $latter_pos);
} @else {
height: $line_width / $ratio3;
background: black;
}
}
}
.line-chart {
$chart_width: 600px;
$chart_height: 200px;
display: block;
position: relative;
width: $chart_width;
height: $chart_height;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: darkgray;
@for $i from 1 through 99 {
@include generic_line($i, $chart_width, $chart_height, 6px, 6px, $raw_ydata);
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="line-chart">
<div class="line-0"></div>
<div class="line-1"></div>
<div class="line-2"></div>
<!-- サフィックス番号の繰り返しなので中略 -->
<div class="line-99"></div>
</div>
</body>
</html>
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー