티스토리 뷰

728x90
반응형

TOAST UI Editor.
그리고 두개의 괜찮은 차트 라이브러리를 삽입하여 완성하였다.

그리고 이 에디터 UI는 급조하여서 사용하기 마냥 쉬운 상태는 아니지만,

매번 빌드하기도 귀찮고 개인 사이트에 업로드해서 해당 부분에서 글을 쓸 예정이지만 웹호스팅 계정에서는 file_get_contetns가 활용이 안된다.
다른 웹서버를 구하면 배포까지 할 예정이다.
다음은 사용중인 차트들의 예제이며 사용하는 방법이다.

{
  "chart": {
    "type": "line"
  },
  "series": [{
    "name": "sales",
    "data": [30,40,35,50,49,60,70,91,125]
  }],
  "xaxis": {
    "categories": [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}
```apexchart
{
  "chart": {
    "type": "line"
  },
  "series": [{
    "name": "sales",
    "data": [30,40,35,50,49,60,70,91,125]
  }],
  "xaxis": {
    "categories": [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}
`` `
{
      "type": "bar",
      "data": {
      "labels": ["ㅇㄹㅇ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ"],
      "datasets": [{
          "label": "안녕",
          "data": [12, 19, 3, 5, 2, 3],
          "backgroundColor": [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
          ],
          "borderColor": [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
          ],
          "borderWidth": 1
      }]
      },
      "options": {
        "responsive": true,
        "legend": {
          "position": "top"
        },
        "title": {
          "display": true,
          "text": "테스트 차트입니다"
        }
      }
    }
{
      "type": "bar",
      "data": {
      "labels": ["ㅇㄹㅇ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ", "ㅁㄴㅇㄹ"],
      "datasets": [{
          "label": "안녕",
          "data": [12, 19, 3, 5, 2, 3],
          "backgroundColor": [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
          ],
          "borderColor": [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
          ],
          "borderWidth": 1
      }]
      },
      "options": {
        "responsive": true,
        "legend": {
          "position": "top"
        },
        "title": {
          "display": true,
          "text": "테스트 차트입니다"
        }
      }
    }
728x90
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함