[js]chart.js 차트 스크립트

See the Pen chart.js by sangmok-ye (@sangmok-ye) on CodePen.

https://www.chartjs.org/docs/latest/

  const custom = new Image();
  custom.src = "https://cdn-icons-png.flaticon.com/128/4160/4160132.png";
  //  pointStyle: custom 으로 할경우 해당 url의 이미지로 변경됨
  
  const x_val = ["1월","2월","3월","4월","5월","6월","7월"]
  const data = {
    labels: x_val,
    datasets:[{
      label:"데이타셋",
      data:[10,100,25,80,50,85,15],
      pointStyle:"circle",
      // 'circle(default)', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'
      pointBackgroundColor:["red","yellow","blue"],
      pointBorderColor:["green","pink"],
      fill:false,
      // true, false(default)
      backgroundColor:"gray",
      borderColor:"rgba(0,24,674,1)",
      tension: .3,
      // 숫자가 커질 수록 많이 꺽임
      showLine:true,
      // true(default), false
      pointRadius:0,
      // 포인터 노출X
    }]
  }
  new Chart($("#chart"), {
    type: "line",
    // type의 종류 : line, bar, radar,pie, polarArea,doughnut,horizontalBar
    data: data,
    options:{
      maintainAspectRatio :false,
      // #chart를 감싸고 사이즈 잡기 좋음
      animation:{
        tension: {
          duration: 1000,
          easing: 'linear',
          from: 1,
          to: 0,
          loop: true
        },
      },
      scales:{
        yAxes:{
          beginAtZero: true,
          // 최저점이 0부터 시작하지않더라도 0부터 표시되게(default : false)
          min: -20,
          max: 150
          // min,max 미기입시 자동 설정됨
          // data값의 max수치 보다 max값을 나게 설정 시 지뚫 표현 가능
          // min : 0 = beginAtZero: true
          ticks:{stepSize:15},
          // y축 값들의 갭 설정
      },
    },
      plugins:{
        subtitle: {
            display: true,
            text: 'Custom Chart Subtitle'
        },
        legend:{
          labels:{
            font:{
              size:24,
              // 상단의 데이타셋(label)의 폰트사이즈(default: 12)
              family:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
              style:"italic",
              weight:300,
              lineHeight:2
              // 라인하이트는 잘 모르겠음
            }
          }
        }
      },
    }
  })

 

color의 경우 헥스코드, rgba, 텍스트 모두 가능

See the Pen chart 두개 by sangmok-ye (@sangmok-ye) on CodePen.