유니앱 궤적 차트 그리는 방법

모바일 개발에서 궤적 그래프는 가장 일반적으로 사용되는 기능 중 하나입니다. Uniapp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 애플리케이션 개발 프레임워크로, 애플리케이션 개발을 촉진하기 위한 일부 구성 요소와 플러그인을 제공합니다. Uniapp에서는 u-charts 플러그인을 사용하여 궤적 차트를 그릴 수 있습니다. 이 글에서는 u-charts 플러그인을 사용하여 Uniapp에서 궤적 차트를 그리는 방법을 소개합니다.

1. u-차트 플러그인 설치

u-차트 플러그인을 사용하려면 먼저 플러그인을 설치해야 합니다.

(1) HBuilderX에서 Uniapp 프로젝트를 생성합니다.

(2) 프로젝트 루트 디렉터리에서 마우스 오른쪽 버튼을 클릭하고 "Select Workspace"를 선택하여 터미널을 엽니다.

(3) npm install u-charts -S를 입력하고 Enter를 눌러 설치합니다.

둘째, vue 파일에 u-charts 플러그인을 사용해보세요

다음으로, vue 파일에 u-charts 플러그인을 소개하고 사용해 보세요.

(1) 궤적 지도를 그려야 하는 vue 파일에서 해당 플러그인을 참조합니다.

<template>
  <u-charts ref="uCharts" :canvas-id="'CanvasID'" :canvas-style="'width: 100%; height: 300px;'" :type="'line'" :extra="{line:{type:'curve'}}" :categories="categories" :series="series" :animation="true"></u-charts>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.vue'

export default {
  components: {
    uCharts
  },
  data () {
    return {
      categories: ['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80, 92],
        color: '#4c9bfd',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18, 20],
        color: '#ff6347',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }]
    }
  }
}
</script>

(2) 해당 데이터를 플러그인에 전달합니다.

위 코드에서는 두 개의 데이터 카테고리와 시리즈를 전달했습니다. 여기서 카테고리는 궤적 차트의 X축을 나타내고 시리즈는 Y축을 나타냅니다. 여기에는 "Trading Volume 1" 및 "Trading Volume"이라는 두 개의 데이터 세트가 포함됩니다. 2" ".

(3) 렌더링 플러그인.

아래와 같이 U-차트를 렌더링하기 전에 DOM 트리가 마운트되었는지 확인하기 위해 마운트된 Vue의 라이프 사이클 기능을 사용하십시오.

mounted () {
  this.$nextTick(function () {
    // 在渲染时初始化uCharts，按照官方文档格式传参
    let uCharts = this.$refs.uCharts;
    uCharts.init((canvas, width, height) => { });
  })
}

3. 궤적 차트의 고급 애플리케이션

u-charts 플러그인은 궤적을 그릴 수 있을 뿐만 아니라 차트 에서는 막대 차트, 원형 차트 등과 같은 다른 형태의 차트를 그릴 수도 있습니다. 궤적 그래프를 그릴 때 플러그인에서 제공하는 setOption 메소드를 사용하여 궤적 그래프를 보다 정확하게 사용자 정의할 수도 있습니다. 다음은 일반적으로 사용되는 궤적 맵 사용자 정의 작업입니다.

(1) 제목과 부제를 설정합니다.

setOption을 사용하여 제목과 부제를 다음과 같이 설정합니다.

let options = {
  title: {
    text: '轨迹图样例', // 主标题
    subtext: 'uniapp中的轨迹图插件使用', // 副标题
  },
  ...
};
uCharts.setOption(options);

(2) 궤적 차트의 X축 하단 레이블을 회전합니다.

궤적 차트의 X축 하단 라벨에 텍스트가 너무 많은 경우 하단 라벨 텍스트를 특정 각도로 회전시켜 표시 효과를 더 좋게 만들 수 있습니다. 다음과 같이 RotateLabel 메서드를 사용합니다.

uCharts.rotateLabel({
  category?: string;
  degree?: number;
})

(3) 지도 색상 렌더링을 추적합니다.

궤도 지도의 색상 렌더링은 주어진 데이터 세트에 따라 개별적으로 설정할 수 있습니다. 아래와 같이 setSeriesColors 메소드를 사용하여 필요에 따라 각 데이터 세트의 색상을 설정합니다.

let colors = ['#4c9bfd', '#ff6347', '#398dcd', '#f99e1c', '#d5317c', '#3a71af', '#75b86c'];
uCharts.setSeriesColors(colors);

(4) 트랙 포인트 설정.

트랙 포인트의 크기와 스타일은 조정 가능합니다. 아래와 같이 setChartStyle 메소드를 사용하여 트랙 포인트 크기와 트랙 라인 색상을 설정합니다.

uCharts.setChartStyle({
  good: {
    pointSize: 5,
    lineColor: '#4c9bfd'
  },
  bad: {
    pointSize: 5,
    lineColor: '#ff6347'
  }
})

위 소개는 트랙 차트 그리기의 일부 작업일 뿐이며 u-charts 플러그인은 다양한 차트 그리기도 제공합니다. 자세한 내용은 u-charts 공식 문서를 참조하세요.

결론적으로 u-charts 플러그인은 Uniapp 프레임워크에서 쉽게 궤적 차트를 그리고 세밀하게 사용자 정의할 수 있는 매우 편리하고 실용적인 플러그인입니다.

위 내용은 유니앱 궤적 차트 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!