간지나는 웹사이트 개발을 위한 무료 그래프 코드 사이트 [echart] - HTML JavaScript

무료로 그래프의 코드를 받을 수 있는 사이트에 대해 알아보자. 

Echart는 다양한 예쁜 그래프들의 JavaScript 코드를 얻을 수 있다. 

 

 

Web

https://echarts.apache.org/examples/en/index.html

Examples - Apache ECharts

 

Example 메뉴에 들어가면 다양한 그래프들을 볼 수 있다. 

 

 

Install

구현 시에는 echarts를 설치해야한다.

npm으로 echart를 설치해보자. 

npm install echarts

 

 

Code
설치가 끝나면, 실제 코드가 적용될 div를 정의해준다. 

그래프가 뜨지 않는다면 크기도 정의되었는지 확인하자. 

<div id="canvas" style="height: 90%">

 

아래는 echart 사이트에서 얻어온 코드의 앞부분이다. 

(1) 넣어줄 div의 id로 수정하고, 

(2) 데이터 베이스의 주소를 수정해주는 과정이 필요하다. 

아래 주석을 참고하면 된다. 

 

해당 코드는 위 <div 줄 바로 아래에 삽입하여 html 안에 데이터베이스 이외의 모든 코드가 있도록 했다. 

<script type="text/javascript">
    var dom = document.getElementById('canvas'); // (1) id로 수정 
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    //var ROOT_PATH = 'http://127.0.0.1:5000/';
    var option;

    fetch('/static/updated_data2.json') // (2) 주소 수정
        .then(response => response.json())
        .then(data => {
            myChart.setOption({
            title: {

 

 

import

또한, head 내에 script를 불러오는 코드가 필요하다. 

echart.min.js를 직접 다운받아서 웹에 적용시키고자 한다면, 알맞은 주소를 넣고 아래와 같이 쓰면 된다. 

<script src="./resource/echarts.min.js"></script>

 

웹사이트에서 불러오고자 한다면, 아래 코드를 사용하면 된다. 

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

 

 

 

실제로 웹사이트에 적용한 예시는 아래와 같다.