Chart On Blog

수식을 넣다보면 그래프를 넣을 일이 생깁니다. chart-on-blog를 이용하여 그래프를 markdown 형식으로 쉽게 게시글에 추가할 수 있습니다.

예제 1

pie 그래프 예제 입니다

markdown으로 글을 쓰면서 그래프를 추가할 수 있습니다

• %%
• type : pie
• data :
  • labels : [ red, blue, yellow]
  • datasets :
    • 0 :
      • data : [300,50,100]
      • backgroundColor : [#FF6384, #36A2EB, #FFCE56]
      • hoverBackgroundColor : [#FF6384, #36A2EB, #FFCE56]
• options :
• %%

### pie 그래프 예제입니다
markdown으로 글을 쓰면서 그래프를 추가할 수 있습니다

- %%
- type : pie
- data : 
  - labels : [red,blue,yellow]
  - datasets :
    - 0 :
      - data : [300,50,100]
      - backgroundColor : [#FF6384, #36A2EB, #FFCE56]
      - hoverBackgroundColor : [#FF6384, #36A2EB, #FFCE56]
- options :
- %%

---

예제 2

bar 그래프 예제입니다.

markdown으로 글을 쓰면서 그래프를 추가할 수 있습니다

• %%
• type : bar
• data :
  • labels : [red,blue,yellow,green,purple,orange]
  • datasets :
    • 0:
      • label : # of votes
      • data : [12, 9, 3, 5, 2, 3]
      • backgroundColor : [#ff6384, #36a2eb, #ffce56, #4bc0c0, #9966ff,#ff9f40]
• options :
  • maintainAspectRatio : true
  • scales :
    • yAxes :
      • 0 :
        • ticks :
          • beginAtZero : true

### bar 그래프 예제입니다.
markdown으로 글을 쓰면서 그래프를 추가할 수 있습니다

- %%
- type : bar
- data :
    - labels : [red,blue,yellow]
    - datasets :
        - 0:
            - label : # of votes
            - data : [12, 9, 3, 5, 2, 3]
            - backgroundColor : [#ff6384, #36a2eb, #ffce56, #4bc0c0, #9966ff,#ff9f40]
- options :
    - maintainAspectRatio : true
    - scales :
        - yAxes :
            - 0 :
                - ticks :
                    - beginAtZero : true

- %%

---

예제 3

여러 데이터를 하나의 그래프에 표현하기

datasets Array에 여러 json object로 들어가야할 것들은 index를 붙여 들여쓰기 해줍니다.

• %%
• type : radar
• data :
  • labels :[Eating, Drinking, Sleeping, Designing, Coding, Cycling, Running]
  • datasets :
    • 0 :
      • label : My First Dataset
      • data : [65, 59, 90, 81, 56, 55, 40]
      • borderColor : #4BC0C0
      • pointBorderColor : #ffffff
      • pointBackgroundColor : #4BC0C0
    • 1 :
      • label : My Second Dataset
      • data : [28, 48, 40, 19, 96, 27, 100]
      • borderColor : #ff6384
      • pointBorderColor : #ffffff
      • pointBackgroundColor : #ff6384
• options :
• %%

 

# 예제 3
### 여러 데이터를 하나의 그래프에 표현하기
`datasets` Array에 여러 json object로 들어가야할 것들은 index를 붙여 들여쓰기 해줍니다.

- %%
- type : radar
- data : 
    - labels : [Eating, Drinking, Sleeping, Designing, Coding, Cycling, Running]
    - datasets :
        - 0 :
            - label : My First Dataset
            - data : [65, 59, 90, 81, 56, 55, 40]
            - borderColor : #4BC0C0
            - pointBorderColor : #ffffff
            - pointBackgroundColor : #4BC0C0
        - 1 :
            - label : My Second Dataset
            - data : [28, 48, 40, 19, 96, 27, 100]
            - borderColor : #ff6384
            - pointBorderColor : #ffffff
            - pointBackgroundColor : #ff6384

- options : 
- %%

---

예제 4

MathJax와도 함께 쓰면 좋습니다

$$
f(x) = x^2
$$

• %%
• type : line
• data :
  • labels : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
  • datasets :
    • 0 :
      • label : f(x)
      • data : [0,1,3,9,16,25,36,49,64,81,100,121,144,169,196,225,256,289,324,361,400]
      • borderColor : #EF5369
• options :
• %%

### MathJax와도 함께 쓰면 좋습니다
$$
f(x) = x^2
$$

- %%
- type : line
- data :
    - labels : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    - datasets :
        - 0 :
            - label : f(x)
            - data : [0,1,3,9,16,25,36,49,64,81,100,121,144,169,196,225,256,289,324,361,400]
            - borderColor : #EF5369
- options :
- %%

참고자료
- 대표 이미지 소스 : https://medium.com/@codeanddogs/beautiful-charts-with-javascript-using-chart-js-3bbee6a5cd2b