Chart.js : 축 및 스케일로 시작합니다-JS 튜토리얼-php.cn

Chart.js : 축 및 스케일로 시작합니다

Christopher Nolan

풀어 주다： 2025-03-15 09:21:16

원래의

119명이 탐색했습니다.

Chart.js : 축 및 스케일로 시작합니다

처음 네 개의 튜토리얼에서는 Chart.js에 대해 많은 것을 배웠습니다. 처음 네 개의 튜토리얼을 읽은 후 툴팁과 태그를 사용자 정의하고 글꼴을 변경하며 다른 유형의 차트를 만들 수 있어야합니다. 이 일련의 튜토리얼은 아직 Chart.js : Axis and Scale의 측면을 소개하지 않았습니다.

v1.0 버전의 라이브러리 이후 규모가 많이 바뀌 었으며 이제 더 강력합니다. 이 튜토리얼에서는 스케일을 조작하고 라이브러리가 제공 한 다양한 옵션을 사용하여 외관을 제어하는 방법을 배우게됩니다.

그리드 라인과 축 레이블을 변경하십시오

그리드 라인의 모든 구성 옵션은 제목 및 글꼴 키의 scale 옵션에 중첩됩니다.

아래는 다양한 차트 옵션 세트로 지정된 동일한 오래된 자동차 속도의 차트입니다.

 var chartoptions = {
  플러그인 : {
    전설: {
      디스플레이 : True,
      위치 : '상위',
      라벨 : {
        Boxwidth : 50,
        usepointStyle : true,
        PointStyle : "Line"
      }
    }
  },
  스케일 : {
    x : {
      그리드 : {
        디스플레이 : False
      },
      제목: {
        디스플레이 : True,
        텍스트 : "초 시간",
        색상 : "빨간색",
        글꼴 : {
          크기 : 24,
          체중 : "대담한"
        }
      }
    },
    Y : {
      그리드 : {
        색상 : "#CCC",
        Borderdash : [20, 4],
        BorderColor : "Black",
        TickColor : "Black"
      },
      제목: {
        디스플레이 : True,
        텍스트 : "시간당 마일 속도",
        색상 : "녹색",
        글꼴 : {
          크기 : 18,
          체중 : "대담한"
        }
      }
    }
  }
};

로그인 후 복사

grid 라는 키도 있습니다. font 키로 설정하면

설정된 단위를 분기의 최소 및 최대 값으로 사용하여 minute 의 최소 및 최대 값을 설정할 수도 있습니다. displayFormats 키를 사용하여 시간이 스케일에 표시되는 형식을 지정할 수 있습니다.

round 키를 사용하여 차트에 표시하기 전에 시간을 반올림 할 수도 있습니다. round 값을 설정할 때주의하십시오. 값을 hour 으로 설정하고 차트에서 두 번 플로팅해야한다고 가정 해 봅시다. 한 번은 오전 5시 30 분이고 다른 시간이 오전 5시 50 분인 경우 오전 5시에 티틱 마크에 모두 그려집니다. 값을 minute 으로 설정하면 각각 5:30 및 5:50 마커에 그려집니다.

다음 코드를 사용하여 시간 스케일을 사용하여 튜토리얼 시작시 그려진 줄 차트를 그릴 수 있습니다.

 var chartoptions = {
  플러그인 : {
    전설: {
      위치 : "상단",
      라벨 : {
        Boxwidth : 50,
        usepointStyle : true,
        PointStyle : "Line",
      }
    }
  },
  스케일 : {
    x : {
      유형 : "시간",
      그리드 : {
        TickColor : "Green",
        Borderdash : [5, 2],
        진드기 : 2,
        색상 : "검은 색",
        BorderColor : "Black",
      },
      시간: {
        단위 : "분",
        계단화 : 30,
        ToolTipFormat : "HH : MM A",
        DisplayFormats : {
          "Minute": "HH : MM A"
        }
      },
      진드기 : {
        색상 : "녹색",
        글꼴 : {
          체중 : "대담한"
        }
      },
      제목: {
        디스플레이 : True,
        텍스트 : "시간",
        글꼴 : {
          체중 : "대담한",
          크기 : 22
        }
      }
    },
    Y : {
      그리드 : {
        색상 : "검은 색",
        Borderdash : [5, 2,],
        BorderColor : "Black",
        TickColor : "Red",
        진드기 : 2,
      },
      진드기 : {
        색상 : "빨간색",
        글꼴 : {
          체중 : "대담한"
        }
      },
      제목: {
        디스플레이 : True,
        텍스트 : "속도 (mph)",
        글꼴 : {
          체중 : "대담한",
          크기 : 22
        }
      }
    }
  }
};

로그인 후 복사