Chart.js 경량 차트 라이브러리를 사용하는 단계에 대한 자세한 설명

이번에는 Chart.js 경량 차트 라이브러리를 사용하는 단계에 대해 자세히 설명합니다. Chart.js 경량 차트 라이브러리를 사용할 때 주의 사항은 무엇입니까?

머리말

최근 프로젝트에서 페이지에 차트를 그려야 하는 상황이 발생했습니다. svg나 캔버스를 사용하여 그릴 수 있지만 반드시 그럴 필요는 없습니다. 만족스러운 솔루션이므로 프로젝트 사용을 위해 주류 타사 차트 라이브러리가 포함되었습니다. 다음은 주로 사용 중 내 경험과 해결 방법 중 일부를 기록한 것입니다. 특정 튜토리얼은 공식 문서를 참조하세요.

기술 선택

4개의 차트 라이브러리인 Highcharts, Baidu의 ECharts, Alibaba의 G2 및 Charts.js를 연구했습니다. 이 프로젝트는 차트에 대한 수요가 적고 차트가 복잡하지 않기 때문에 경량 레벨 차트가 도입되었습니다. .js Chart.js는 시작하기 쉽습니다. 페이지에서 스크립트 파일을 참조하고 노드를 생성하면 됩니다. 데이터에 대한 8가지 시각적 표현 방법을 제공하며 각각 동적 효과와 사용자 정의가 가능하며 모든 최신 브라우저(IE9+)에서 효율적인 그리기 효율성을 제공합니다.

IntroductionGitHUb에서 소스 코드를 다운로드하고 dist/Chart.bundle.js 파일을 프로젝트에 도입하여 사용하세요. 소스 코드를 확인하고 여러 모듈 로딩 방법과 호환되는지 확인하세요. 그래서 페이지 로딩에 requireJs를 사용합니다.

사용 경험①차트 색상 값의 수가 데이터 수와 같을 필요는 없습니다. 예를 들어

var pieConfig = {
   type: 'pie',
   data: {
     datasets: [{
      data: [10, 20],
      backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
     }]
  }
}

②는 반응형 옵션인 {반응형: false}를 취소할 수 있습니다. 차트의 크기와 캔버스의 크기를 제어하면 캔버스가 아무리 크더라도 자동으로 외부 컨테이너를 차지하지 않습니다.

3 범례의 클릭 이벤트를 취소합니다. 범례를 클릭하면 기본적으로 데이터의 비율이 숨겨지므로 클릭 이벤트를 제거하고 범례를 설정: {onClick: function () {}}하고 수정해야 합니다. 클릭 이벤트.

IV 범례를 기본 직사각형에서 정사각형으로 변경하고 범례의 글꼴 크기와 색상 값을 설정합니다.

options: {
  legend: {
   position: 'right',
   labels: {
    boxWidth: 14,// 修改宽度
    fontSize: 14,
    fontColor: '#666666'
   }
}

효과는 다음과 같습니다

⑤ 막대 차트에서 그리드 선을 제거하고 축을 설정합니다. 색상, 직사각형 너비 및 y축 데이터 표시는 0부터 시작됩니다. Chart.js 2.0을 사용하면서 구성 매개변수가 많이 변경되어 인터넷에 있는 많은 예제가 유효하지 않게 되었습니다. 효과적인 구성 코드는 다음과 같습니다

options: {
  scales: {
   xAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏x轴方向轴线
     zeroLineColor: '#666666'// 设置轴颜色
    },
    barPercentage: 0.2,// 设置柱宽度
    ticks: {// 设置轴文字字号和色值
     fontSize: 12,
     fontColor: '#666666'
    }
   }],
   yAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏要y轴轴线
     zeroLineColor: '#666666'
     },
     ticks: {
      fontSize: 12,
      beginAtZero: true,// y轴数据从0开始展示
      fontColor: '#666666'
      }
   }]
  }
}

효과는 다음과 같습니다

⑥에 단위를 추가합니다. 차트 툴팁의 데이터, 툴팁을 사용할 수 있습니다. 콜백 함수 설정

tooltips: {
 callbacks: {
  label: function (tooltipItem, data) {
   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%';
   var title = data.labels[tooltipItem.index] + ':';
   return title + value;
   }
  }
}

효과는 다음과 같습니다

tooltips: {
  callbacks: {
   label: function (tooptipItem) {
    return tooptipItem.yLabel + '个' ;
   }
  }
}

효과는 다음과 같습니다

이 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 기사. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 미니 프로그램에서 PHP를 사용하여 얼굴 인식 및 얼굴 인식 로그인을 구현하는 방법

Vue.js 테이블 추가 및 삭제 단계에 대한 자세한 설명

위 내용은 Chart.js 경량 차트 라이브러리를 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!