티스토리 뷰

728x90
반응형

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

웹호스팅에서 curl로 file_get_contents를 대체하였으며 아래의 소스 라이브러리는 전 글과 같다.

{
  "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": "테스트 차트입니다"
        }
      }
    }

만약 사용하고 싶으면 https://allthatnba.com/tistory/ 에서 사용하면된다

사용법은 아래의 클라이언트키와 시크릿키의 입력칸에 입력할 값을 아래의 링크에서 발급 받는다.
https://www.tistory.com/guide/api/manage/register

Image

콜백url과 서비스url은 위의 그림을 참조하기 바란다.
시크릿키와 클라이언트키를 입력후 API로그인 버튼을 클릭, 그리고 로그인이 완료되면 겟 카테고리와 겟 리스트를 활용하여 값을 불러오거나 저장할 수 있으며 글을 새로 쓰려면 글쓰기로, 아니면 글 수정으로 활용하면 된다.

디자인의 경우 크게 신경쓰지않고 말그대로 그냥 사용만 가능하게 해놨다..

Image

버그나 기타 문의사항이 있으면 댓글로..

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
글 보관함