Chart.js : 라인 및 막대 차트를 시작하는 것

이 튜토리얼은 이전 Chart.js 소개를 기반으로 선 및 막대 차트 생성을 보여줍니다. 차트 모양 및 데이터 표현을 향상시키기위한 사용자 정의 옵션을 탐색하겠습니다.

라인 차트 : 시간이 지남에 따라 변화를 시각화합니다

라인 차트는 다른 시간과 관련하여 가변적 인 변화가 어떻게 변하는지를 효과적으로 보여줍니다. 예를 들어, 시간이 지남에 따라 차량의 속도를 표시하는 데 이상적입니다.

Chart.js는 라인 차트 생성을 단순화합니다. 기본적으로 차트는 rgba(0, 0, 0, 0.1) 로 채워집니다. 배경색을 보이도록 backgroundColor 속성이 설정되고 fill 속성이 true 인지 확인하십시오. tension 키를 사용하면 맞춤 입방 보간이 허용되어 데이터 포인트 간의 라인 곡선에 영향을 미칩니다. "middle" 으로 stepped 하면 단계와 같은 효과가 발생합니다.

데이터 포인트 간의 개별 세그먼트는 독특하게 스타일링 할 수 있습니다. 이 예제는 두 대의 자동차 속도를 보여줍니다.

 const checkspeed = (ctx, color_a, color_b) => ctx.p0.parsed.y> ctx.p1.parsed.y? Color_A : Color_B;

DataFirst = {
  레이블 : "자동차 A- 속도 (mph)",
  데이터 : [0, 59, 75, 20, 20, 55, 40],
  BorderColor : "Black",
  배경 콜러 : "투명",
  Borderdash : [3, 3],
  계단식 : "중간"
};

DataSecond = {
  레이블 : "자동차 B- 속도 (mph)",
  데이터 : [20, 15, 15, 60, 60, 65, 30, 70],
  Bordercolor : "Blue",
  배경 콜러 : "투명",
  세그먼트 : {
        BorderColor : CTX => CheckSpeed ​​(CTX, 'Orangered', 'Yellowgreen'),
  },
};

speeddata = {
  레이블 : [ "0S", "10S", "20S", "30S", "40S", "50S", "60S"],
  데이터 세트 : [DataFirst, DataSecond]
};

LineChart = 새로운 차트 (SpeedCanvas, {
  유형 : "라인",
  데이터 : SpeedData
});

이 코드는 연속 데이터 포인트를 비교합니다. 속도가 감소하면 orangered 사용됩니다. 그렇지 않으면, yellowgreen .

막대 차트 : 명확성을위한 여러 y 축

스케일이 다른 여러 데이터 세트의 경우 여러 y 축을 사용하면 가독성이 향상됩니다. 각 데이터 세트는 yAxisID 키를 사용하여 특정 y 축에 할당 할 수 있습니다.

 gravitybars = '#f06292';
DensityBars = '#4DB6AC';

DensityData를하자 = {
  레이블 : "행성의 밀도 (kg/m3)",
  데이터 : [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  배경 콜러 : 밀도 바,
  yaxisid : "y 축 밀도"
};

gravitydata를하자 = {
  레이블 : "행성의 중력 (m/s2)",
  데이터 : [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  배경 콜로르 : 중력 바,
  yaxisid : "y 축 중단"
};

PlanetData = {
  라벨 : [ "머큐리", "금성", "지구", "화성", "목성", "토성", "천왕성", "Neptune"],
  데이터 세트 : [DensityData, GravityData]
};

chartoptions = {
  백퍼 중심 : 1,
  CategoryPercentage : 0.8,
  스케일 : {
    "y 축 밀도": {
      그리드 : {
        색상 : 밀도 바,
        TickColor : DensityBars,
        BorderColor : 밀도 바
      },
      진드기 : {
        색상 : 밀도 바
      },
      위치 : "왼쪽"
    },
    "y 축 중단": {
      그리드 : {
        색상 : 중력 바,
        Tickcolor : 중력 바,
        BorderColor : 중력 바
      },
      진드기 : {
        색상 : 중력 바
      },
      위치 : "오른쪽"
    }
  }
};

Barchart = 새로운 차트 (DensityCanvas, {
  유형 : "바",
  데이터 : PlanetData,
  옵션 : ChartOptions
});

이 예제는 고유 한 yAxisID 값을 사용하고 chartOptions 에서 각 축에 대해 그리드, 진드기 및 테두리 색상을 사용자 정의합니다. barPercentage 및 categoryPercentage 컨트롤 바 간격.

결론

이 튜토리얼은 Chart.js의 기본 라인 및 막대 차트 작성 및 사용자 정의를 다루므로 시각적으로 매력적이고 유익한 차트를 만들 수 있습니다. 다음 튜토리얼은 레이더 및 극지 지역 차트를 탐색합니다.

위 내용은 Chart.js : 라인 및 막대 차트를 시작하는 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!