CSS를 사용하여 영역 차트를 만드는 방법

개요

영역 차트는 데이터 세트를 그래픽 형식으로 나타내는 데 사용됩니다. HTML과 CSS를 사용하여 영역 차트를 만들 수 있습니다. 따라서 시작과 끝으로 두 개의 맞춤 변수를 생성하겠습니다. 사용자 정의 변수는 "--" 기호와 변수 이름을 사용하여 생성할 수 있습니다. 예를 들어 -width, -height 및 -start와 같은 변수를 만듭니다.

알고리즘

1단계 - HTML 파일을 만들고 텍스트 편집기에서 파일을 엽니다. HTML 파일에 HTML 템플릿을 추가합니다.

2단계−이제 상위 div 컨테이너를 만들고 차트라는 클래스 이름을 지정합니다.

으아아아

3단계 −차트 목록 항목을 생성하려면 ul 태그를 생성하세요.

으아아아

4단계−이제 li 태그를 사용하여 차트의 막대를 만듭니다

으아아아

5단계− 차트의 시작점과 끝점을 정의하여 li 태그에 맞춤 변수를 추가할 수도 있습니다.

으아아아

6단계− 이제 동일한 폴더에 style.css 파일을 만들고 style.css 파일을 HTML 문서에 연결합니다.

으아아아

7단계 − 이제 'areaChart' 컨테이너와 모든 목록 항목에 대해 설명합니다.

8단계 − 영역 차트가 성공적으로 생성되었습니다.

예

이 예에서는 CSS(Cascading Styles Sheet)를 사용하여 차트 영역을 만들었습니다. 이를 위해 첫 번째 파일인 HTML 파일과 다른 파일에 대한 두 개의 파일을 만들었습니다. 목록 항목이 포함된 순서 없는 목록을 만들었습니다. HTML 파일에서 데이터 세트가 포함된 ul 태그를 만들었습니다.

으아아아

아래 이미지는 위 예의 출력을 보여주며, 그래픽 형식으로 표현된 데이터 세트가 포함된 차트 영역을 보여줍니다. HTML의 li 태그에 데이터를 맞춤 변수로 설정하고 차트에 표시할 시작점과 끝점을 설정했습니다.

결론

위 예시처럼 HTML과 CSS를 사용해 정적 차트를 구축했습니다. 따라서 JavaScript를 사용하거나 API를 차트 레이블에 연결하여 차트 영역을 동적으로 만들 수도 있습니다. 위의 예를 사용하는 동안 첫 번째 목록 항목의 시작 지점은 다음 목록 항목의 끝 지점과 동일해야 한다는 점을 기억해야 합니다. li 태그를 사용하여 차트의 막대를 생성하므로 div 또는 테이블 컨테이너를 사용할 수도 있습니다.

위 내용은 CSS를 사용하여 영역 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!