カテゴリー
【Sass実践勉強会】続・cssだけで折れ線チャートを描く方法〜要素の回転と変形を使う
※ 当ページには【広告/PR】を含む場合があります。
2021/06/06
ブロック要素の回転と変形の基礎
回転・transform
transform
transform: rotate(<傾ける角度>);
transform-origin: <左からの位置> <上からの位置>;
.黒線 {
width: 200px;
height: 4px;
background: black;
}
.緑線 {
width: 200px;
height: 4px;
background: green;
transform: rotate(30deg);
transform-origin: 0 50%;
}
.黄線 {
width: 200px;
height: 4px;
background: yellow;
transform: rotate(-30deg);
transform-origin: 0 50%;
}
transform-origin: 0 50%;
長さの修正
Sassの実装
$ tree
.
├── index.html
├── style.scss
└── _data.scss
_data.scss
$sim_xydata: [
[0,1],
[1,0],
[2,0],
//...中略
[99,7],
];
<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-99"></div>
</div>
</body>
</html>
style.scss
@use 'sass:math';
@use 'data';
@mixin generic_line(
$line_index,
$chart_width,
$chart_height,
$rect_width,
$line_width,
$data
) {
.line-#{$line_index - 1} {
position: absolute;
box-sizing: border-box;
margin: 0;
padding: 0;
left: $rect_width * ($line_index - 1);
width: $rect_width;
height: $line_width;
top: $chart_height * (1 - nth(nth($data, $line_index), 2) / 10);
$diff: nth(nth($data, $line_index + 1), 2) - nth(nth($data, $line_index), 2);
$rect_height: $chart_height * abs($diff) / 10;
//👇①回転後の補正距離の計算
width: 1px*math.pow(math.pow($rect_width/1px,2)+math.pow($rect_height/1px,2), 0.5);
//👇②回転角の計算
$tilte_angle: math.atan(-1*$chart_height*$diff/10/$rect_width);
@if $diff > 0 {
background: blue;
transform: rotate($tilte_angle);
transform-origin: 0 50%;
} @else if $diff < 0 {
background: red;
transform: rotate($tilte_angle);
transform-origin: 0 50%;
} @else {
background: black;
}
&:before {
display: block;
position: absolute;
border-radius: 50%;
content: "";
top: 0;
left: 0;
width: $line_width;
height: $line_width;
background: yellow;
}
}
}
.line-chart {
$chart_width: 600px;
$chart_height: 200px;
$section_num: 99;
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 $section_num {
@include generic_line($i, $chart_width, $chart_height, $chart_width/$section_num, 2px, data.$sim_xydata);
}
}
Eq. (1)
1pxEq. (2)
まとめ
参考サイト
その他のリンク記事
関連記事
【Sass実践勉強会】cssだけで折れ線チャートを描く方法
2021/06/04
ID#:45
Css Sass 折れ線チャート作成
【Sass実践勉強会】cssだけで折れ線チャートを描く方法
基本的にCSSで折れ線を作成する機能は無いのですが、擬似的に斜線を描く『裏ワザ』がネタとしてlinear-gradientを利用する方法があります。今回はこの裏ワザで折れ線チャートが果たして上手く描けるのかを検証してみたいと思います。
クリックするとリンク先へ飛びます関連記事
【Svelte Framework入門】Svelteを使ってJavascript/CSSからSVG曲線チャートを描く
2022/08/19
ID#:140
Svelte Framework
【Svelte Framework入門】Svelteを使ってJavascript/CSSからSVG曲線チャートを描く
軽量Javascripフレームワーク『Svelte』を使って、綺麗な曲線チャートをSVGのPath要素で作成します。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー