ライブラリを使用せずに円環図と線図を作成するには:(reactを使用)

14838 ワード

テキストリンク

グラフは、Canvas、DIV(html, css)、SVG、<circle>の3つの方法で作成できます.

Canvas

ビットマップ領域の利用
JavaScriptコードを使用して画面にピクセルを描画します.
👎) 欠点は画素を処理し,グラフィックの大きさに応じて解像度を考慮することである.

DIVを使用する方法

DIVを使用して円環図を描く場合は、radiusを調整して円を描くことができます.
👎) この方式の欠点は,スクリーンサイズにかかわらずグラフィックのサイズが固定されているため,反応型が容易であることである.

SVG

スクリーンサイズに応じてベクトルで変化するフィーチャー
👍) SVGタグのstrokeやstroke-width、나는 여기서 반응형에 쉽게 구현할 수 있고, 자료가 많은 svg를 선택해서 개발을 했었다!などの属性を持ち、グラフィック表現がしやすいという利点があります!dash

ドーナツグラフ🍩

stroke-dasharray

図周長のgapとstrokeのパターンを定義し、図周長のstrokeと各stroke-dasharray="5"の間の空白のパターンを定義します.

各ストロークの長さと各ストロークの間の空白の長さを5と定義する

1番目の値は各ストロークの長さを表し、2番目の値は各ストローク間の空白の長さ

を表す.

svgのサイクルもそうです!

10079142の特徴は、パターンがクロック3時方向から!

stroke-dashoffset

dash配列をレンダリングするときのオフセット量を定義するプロパティ
stroke-dasharray="5 10"

svg lineの基本形式はsvg circleである.

ただし、stroke-dasharrayが適用される場合、モードは、割り当てられた値に応じて変化する.

図に示すように、ブロックが実際の画面で表示される領域として保持されている場合、

<h3>이제 도넛 차트 직접 만들어보기! 🍩🍩🍩</h3> ドーナツの75%を表示するグラフを作成する場合は、<code>이게 무슨 말인지 예시를 통해 알아보쟈!</code>と表示します. 円の周長式2πrに0.75を乗じるからです. <blockquote> 周長は<code>stroke-dasharray="10 5"</code>または<code>stroke-dashoffset</code>などを求めることができる. </blockquote> ただし<code>stroke-dasharray={2 * Math.PI * 90 * 0.75}</code>の場合、<code>2* Math.PI * 반지름</code>は3時方向から開始!! グラフィックを回転させるには、前述の<code>document.getElementById().getTotalLength()</code>および<code>circle</code>のプロパティを使用する必要があります!<pre><code class="language-jsx">// React // x = 원의 전체 둘레 길이 // a = 데이터에 해당하는 원의 둘레 길이 ex) 63% -> x * 0.63 <circle strokeDasharray="<a> <x - a>" strokeDashoffset="<0.25 * x>" /></code></pre>このように計算すると、ドーナツグラフを作成できます! <iframe class="embed"src="https://codesandbox.io/embed/gifted-brahmagupta-0vcmwi?fontsize=14&hidenavigation=1&theme=dark"/> <h2>라인 차트📈</h2> 線図を作成するには、順序を表す円点と対応する線が必要です. まずSVGの<code>stroke</code>: <iframe class="embed"scrolling="no"src="https://codepen.io/lee-ye-ji/embed/XWVRERP?default-tab=html%2Cresult"allowfullscreen=""/> x 1とy 1の属性は線の始まりを表し、x 2とy 2は線の終わりを表す. したがって、ランキング表を取得するには、現在のデータと以下のデータが必要です: 次のコードは、<code>stroke-dasharray</code>の含む順序でグラフを表示します. この場合、直線を描くためには、<code>stroke-dashoffset</code>にデータを送信して加工する必要がある. まず、このデータのx,yを求めるために、以下のコードのように記述することができる. ここで、10にx軸とy軸を乗じて順位の変動をよりよく反映する. すなわち、<code><line></code>ラインを描画し、<code>const data = [1, 4, 2, 3, 4, 5, 5];</code>データを縦方向に表示する.<pre><code class="language-jsx">import { useMemo } from "react"; function useRank(data) { const arr = useMemo( () => data.map((rank, index) => { const lineHeight = Math.round(rank) * 10; return { x: index * 10, y: lineHeight }; }), [data] ); return [arr]; } export default useRank;</code></pre>直線の始点x 1,y 1,直線の終点x 2,y 2を求めるには、以下のコードに従って記述する必要がある.<pre><code class="language-jsx">import { useMemo } from "react"; function useLine(arr) { const lines = useMemo( () => arr.reduce((result, point, index) => { if (index === 0) return []; const previous = arr[index - 1]; const line = { x1: previous.x, y1: previous.y, x2: point.x, y2: point.y }; return [...result, line]; }, []), [arr] ); return [lines]; } export default useLine; </code></pre>この式を解くと、 Reduce(累積値、現在値、インデックス)の3つのパラメータを使用して解く必要があります. このとき、値が出力されると、pointにはlineオブジェクトが含まれます. すなわち、現在値はline値である.これで、行の値が結果、すなわち新しい配列[{x 1、y 1、x 2、y 2}、{}、...]に入ります. ここで、ラインの値をさらに理解すると、ラインの最初の値は以下のようになります.<pre><code class="language-null">x1: 0 y1: 0 x2: 10 y2: 40</code></pre>すなわち、前<code>useRank.js</code>で求めた2つの値が加算される. <code>10, 20, 30, 40, 50</code> 現在直線を描く場合は、その順序を表す点を描く必要があります.<code>10, 40, 20, 30, 40, 50, 50</code>で求めたx,y値を円とテキストに入れて位置決めする.このとき、字と丸が重なると見づらいので、その字のx軸を1と足して完成!!<pre><code class="language-jsx">{points.map(({ x, y }, index) => { return ( <> <GraphCircle cx={x} cy={y} r="1" key={index} /> <Text x={x + 1} y={y}> {data[index] + "위"} </Text> </> ); })}</code></pre>完全コードは以下の通りです! <iframe class="embed"src="https://codesandbox.io/embed/eloquent-jennings-k1s58z?fontsize=14&hidenavigation=1&theme=dark"/> <hr/> ソース)<a href="https://tecoble.techcourse.co.kr/post/2021-11-10-making-donut-chart-react/" rel="nofollow">리액트에서 도넛 차트를 만들어보자!</a> <a href="https://velog.io/@dabin0219/React-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%97%86%EC%9D%B4-SVG-%EC%B0%A8%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0" rel="nofollow">React 라이브러리 없이 SVG 차트 만들기</a>

Reference

この問題について(ライブラリを使用せずに円環図と線図を作成するには:(reactを使用)), 我々は、より多くの情報をここで見つけました https://velog.io/@ye-ji/라이브러리-없이-도넛차트와-라인-차트-만들어보기-with-React

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[明日学習キャンプ]事前課題-記憶力テスト

アルゴリズムビンゴ問題