웹 프론트엔드 JS 튜토리얼 JSChart 경량 그래픽 보고서 도구(내장 기능에 대한 중국어 참조)_javascript 기술

JSChart 경량 그래픽 보고서 도구(내장 기능에 대한 중국어 참조)_javascript 기술

May 16, 2016 pm 06:18 PM

인터넷에 이 프레임워크에 대한 기사가 많지 않고 중국어도 잘 지원하지 않기 때문입니다. 설명서는 모두 영어로 되어 있지만 일부 초보자는 읽을 시간과 에너지가 없을 수 있습니다. 참고 매뉴얼을 좀 더 알기 쉽게 만들기 위해 많은 친구들이 알고 있어서 내장된 기능을 퇴근 후 대략적으로 번역했습니다. 모두가 자신이 이해하지 못하는 것을 시도해 보고 공식 사례를 참조하여 쉽게 시작할 수 있기를 바랍니다.

JSChart 내장 함수 참조

colorizeBars(array colordata)는 히스토그램의 각 사각형 색상을 설정합니다.
colorizePie(array colordata)는 원형 차트의 각 블록 색상을 설정합니다.
draw()는 모든 설정이 완료된 후 이 함수를 실행하여 차트를 그립니다.
setAxisColor(string hexcolor)는 원형 차트에 유효하지 않은 축 색상을 설정합니다. 매개변수는 16진수 색상 값입니다.
resize(정수 x, 정수 y)는 차트 크기를 재설정하고 기본 x/y는 400px/300px이며 새 값은 기본값의 정수 배수여야 합니다.
setAxisNameColor(string hexcolor)는 색상을 설정합니다. 축 이름 중 원형 차트가 유효하지 않습니다.
setAxisNameFontSize(정수 글꼴 크기)는 원형 차트에 유효하지 않은 축 이름 글꼴 크기를 설정합니다. 기본값은 11입니다.
setAxisNameX(string axisname)는 원형 차트에 유효하지 않은 x축 이름을 설정합니다.
setAxisNameY(string axisname)는 원형 차트에 유효하지 않은 y축 이름을 설정합니다.
setAxisPaddingBottom(integer padding)은 x축과 컨테이너 하단 사이의 거리를 설정하며 기본값은 30입니다.
setAxisPaddingLeft(integer padding)는 y축과 컨테이너의 왼쪽 여백 사이의 거리를 설정하며 기본값은 40입니다.
setAxisPaddingRight(integer padding)은 차트 오른쪽과 컨테이너 사이의 거리를 설정하며 기본값은 30입니다.
setAxisPaddingTop(integer padding)은 차트 상단과 컨테이너 사이의 거리를 설정하며 기본값은 30입니다.
setAxisValuesColor(string hexcolor)는 원형 차트에는 유효하지 않은 x/y 축 값의 색상을 설정합니다.
setAxisValuesDecimals(정수 소수)는 곡선 차트의 x/y 축 값 또는 막대 차트의 y 축 값을 설정합니다. 기본값은 자동입니다.
setAxisValuesFontSize(integerfontsize)는 두 축 값의 글꼴 크기를 설정하며 이는 원형 차트에는 유효하지 않습니다.
setAxisValuesNumberX(정수)는 x축에 표시되는 값의 수를 설정합니다. 이 값은 자동으로 조정되며 원형 차트에는 유효하지 않습니다.
setAxisValuesNumberY(정수)는 x축에 표시되는 값의 수를 설정합니다. 이 값은 자동으로 조정되며 원형 차트에는 유효하지 않습니다.
setAxisWidth(integer width)는 축의 너비를 설정하며 기본값은 2입니다.
setBackgroundColor(string hexcolor)는 전체 차트의 배경색을 설정하며 기본값은 #FFF입니다.
setBackgroundImage(string filename)는 차트의 배경 이미지를 설정하고 이미지는 두 축을 따라 자동으로 반복됩니다.
setBarBorderColor(string hexcolor)는 히스토그램의 막대 테두리 색상을 설정합니다. 기본값은 #C4C4C4입니다.
setBarBorderWidth(integer width)는 히스토그램에만 유효한 히스토그램 테두리의 너비를 설정합니다.
setBarColor(string hexcolor)는 히스토그램에 있는 모든 직사각형의 색상을 설정합니다. 이 함수는 colorize() 함수에 의해 재정의되며 히스토그램에만 유효합니다.
setBarOpacity(float opacity)는 히스토그램의 투명도를 설정하며 값은 0에서 1 사이이고 기본값은 0.9입니다.
setBarSpacingRatio(정수 비율)는 히스토그램의 직사각형 간격을 설정하여 히스토그램의 너비를 제어합니다. 값은 0에서 100 사이의 정수입니다. 기본값은 10입니다.
setBarValues(boolean value)는 직사각형 상단에 값을 표시할지 여부를 설정합니다.
setBarValuesColor(string hexcolor)는 히스토그램 직사각형 값의 색상을 설정합니다.
setBarValuesDecimals(정수 소수)는 히스토그램의 직사각형 높이 값을 설정합니다. 값은 10진수입니다. 기본값은 자동입니다.
setBarValuesFontSize(정수 글꼴 크기)는 히스토그램 직사각형 값의 글꼴 크기를 설정하며 기본값은 8입니다.
setCanvasIdPrefix(문자열 접두사)는 제작 요소의 ID 접두사를 맞춤 설정하며 기본값은 JSChart이며 일반적으로 이 값은 그렇지 않습니다. 수정해야 합니다.
setDataArray(array data, string id)는 배열 형식으로 데이터를 차트로 가져옵니다. id 매개변수는 선택사항이며 동일한 ID를 설정할 수 있습니다.
setDataXML(string filename)은 xml 형식으로 차트에 데이터를 가져옵니다.
setFlagColor(string hexcolor)는 프롬프트 플래그의 색상을 설정합니다.
setFlagOffset(integer offset)은 프롬프트 플래그의 오프셋을 설정하며 원형 차트에만 적용됩니다.
setFlagOpacity(float opacity)는 프롬프트 기호의 투명도를 0에서 1 사이로 설정하며 기본값은 0.5입니다.
setFlagRadius(integer radius)는 프롬프트 기호의 반경을 설정하며 기본값은 3입니다.
setFlagWidth(integer width)는 프롬프트 로고 테두리 너비를 설정하며 기본값은 1입니다.
setGraphExtend(boolean extend)는 차트 확장 기능을 켤지 여부를 설정합니다. 기본값은 false입니다. 켜져 있으면 이중 축과 그리드 선이 확장됩니다. 현재 길이의 1/15로 스타일을 더 아름답게 만들 수 있습니다.
setGraphLabel(문자열 라벨)은 사용자 정의 차트 워터마크 라벨 텍스트를 설정합니다.
setGraphLabelColor(string hexcolor)는 사용자 정의 차트 워터마크 레이블 색상을 설정합니다.
setGraphLabelFontSize(integerfontsize)는 사용자 정의 차트 워터마크 라벨의 글꼴 크기를 설정하며 기본값은 8입니다.
setGraphLabelOpacity(float opacity)는 사용자 정의 차트 워터마크 라벨의 투명도를 설정합니다.
setGraphLabelPosition(문자열 위치)은 사용자 정의 차트 워터마크 레이블의 위치를 ​​설정합니다. 값 범위는 각각 네 모서리에 위치합니다. 기본값은 위쪽입니다. 오른쪽 코너.
setGraphLabelShadowColor(string hexcolor)는 사용자 정의 차트 워터마크 라벨의 그림자 색상을 설정합니다.
setGrid(boolean Grid)는 그리드 선 표시 여부를 설정합니다.
setGridColor(string hexcolor)는 그리드 선의 색상을 설정하며 기본값은 #C6C6C6입니다.
setGridOpacity(float opacity)는 그리드 선 투명도를 설정하며 값은 0에서 1 사이이고 기본값은 0.5입니다.
setIntervalEndX(integer end)는 x축의 끝 값을 설정합니다. 시작 값이 설정된 경우 이 값은 시작 값보다 커야 합니다.
setIntervalEndY(integer end)는 y축의 끝 값을 설정합니다. 시작 값이 설정된 경우 이 값은 시작 값보다 커야 합니다.
setIntervalStartX(integer start)는 x축의 시작 값을 설정합니다. 끝 값이 설정된 경우 이 값은 끝 값보다 작아야 합니다.
setIntervalStartY(integer start)는 y축의 시작 값을 설정합니다. 끝 값이 설정된 경우 이 값은 끝 값보다 작아야 합니다.
setLabelX(array label)는 x축에 라벨을 추가합니다. 해당 매개변수는 두 개의 값으로 구성된 배열입니다. 첫 번째 매개변수는 x축의 라벨 위치이고, 두 번째 값은 표시되는 내용입니다. 라벨로.
setLabelY(array label)는 y축에 라벨을 추가합니다. 해당 매개변수는 두 개의 값으로 구성된 배열입니다. 첫 번째 매개변수는 y축의 라벨 위치이고, 두 번째 값은 표시되는 내용입니다. 라벨로.
setLineColor(string hexcolor, string id)는 그래프의 곡선 색상을 설정합니다. 곡선 차트 예 3을 참조하세요.
setLineOpacity(float opacity, string id)는 곡선 차트에서 곡선의 투명도를 설정하며 값은 0에서 1 사이이고 기본값은 0.9입니다. 매개변수 id의 의미는 위와 동일합니다.
setLineWidth(integer width, string id)는 그래프의 곡선 너비를 설정하며 기본값은 2입니다.
setPieOpacity(float opacity)는 원형 차트의 투명도를 설정하며 값은 0~1입니다. 기본값은 1입니다.
setPiePosition(정수 x, 정수 y)는 컨테이너 내 원형 차트의 위치를 ​​설정하며, 기본값은 0이며,
setPieRadius(정수 반경)는 컨테이너 중앙에 위치합니다. 원형 차트의 반경.
setPieUnitsColor(string hexcolor)는 원형 차트 블록 이름의 색상을 설정합니다.
setPieUnitsFontSize(정수 글꼴 크기)는 원형 차트 블록 이름의 글꼴 크기를 설정합니다.
setPieUnitsOffset(정수 오프셋)은 원형 차트 블록 이름의 위치를 ​​설정하고 정수는 밖으로 이동하고 음수는 안으로 이동합니다.
setPieValuesColor(string hexcolor)는 원형 차트 값의 색상을 설정합니다.
setPieValuesDecimals(정수 소수)는 원형 차트의 총 값을 설정합니다.
setPieValuesFontSize(integerfontsize)는 원형 차트 값의 글꼴 크기를 설정합니다.
setPieValuesOffset(정수 오프셋)은 원형 차트에서 값의 오프셋을 설정합니다. 정수는 바깥쪽으로 이동하고 음수는 안쪽으로 이동합니다.
setShowXValues(boolean show) x축에 스케일 값을 표시할지 여부입니다.
setShowYValues(boolean show) y축에 스케일 값을 표시할지 여부.
setSize(정수 x, 정수 y)는 컨테이너의 크기를 미리 정의하며 draw() 함수 전에 사용해야 합니다.
setTextPaddingBottom(integer padding)은 x축의 레이블 텍스트와 컨테이너 하단 사이의 거리를 설정합니다. 기본값은 1입니다.
setTextPaddingLeft(integer padding)는 y축의 레이블 텍스트 사이의 거리를 설정합니다. -axis 및 컨테이너 왼쪽, 기본값은 8입니다.
setTextPaddingTop(정수 패딩) 차트 상단과 컨테이너 상단 사이의 거리를 설정합니다. 기본값은 15입니다.
setTitle(string 제목) 차트 제목을 설정합니다. 기본값은 "JSChart"입니다.
setTitleColor(string hexcolor)는 제목 색상을 설정합니다.
setTitleFontSize(정수 글꼴 크기)는 제목 글꼴 크기를 설정합니다.
setTitlePosition(string position)은 제목 위치, 값 범위(가운데, 왼쪽, 오른쪽)를 설정합니다.
setTooltip(array tooltip)은 x축에 팁을 설정합니다.
setTooltipBackground(string hexcolor)는 프롬프트 배경을 설정합니다.
setTooltipBorder(string css)는 프롬프트 배경 테두리 스타일을 설정합니다. 매개변수는 CSS 표현식입니다. 기본값은 1px solid #d3d3d3입니다.
setTooltipFontColor(string hexcolor)는 프롬프트 내용의 색상을 설정합니다.
setTooltipFontFamily(문자열 글꼴)은 프롬프트 글꼴 스타일을 설정하며 기본값은 arial입니다.
setTooltipFontSize(integerfontsize)는 프롬프트 콘텐츠 글꼴 크기를 설정하며 기본값은 12입니다.
setTooltipOffset(integer offset)은 프롬프트를 설정합니다. 콘텐츠 오프셋, 기본값은 7입니다.
setTooltipOpacity(float opacity)는 팁 투명도를 설정하며 기본값은 0.7입니다.
setTooltipPadding(string css)은 팁 패딩 스타일을 설정하며 기본값은 2px 5px입니다.
setTooltipPosition(string position)은 팁 위치를 설정하며 값 범위는 nw, ne, sw 및 se이며 기본값은 se입니다.

--전체

JSChart 공식 웹사이트 http://www.jscharts.com/전체 매뉴얼과 예제가 포함되어 있습니다.

중국어를 지원하지 않는 JSChart의 단점에 대해 전문가들은 이미 온라인에서 쉽게 찾을 수 있고 여기에서 다운로드할 수 있는 확장 스크립트를 제공했습니다.
다운로드 후 jscharts_mb.js만 참조할 수도 있고, jscharts.js를 먼저 참조한 다음 jscharts.plug.mb.js를 참조할 수도 있습니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? 프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? 누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유 Demystifying JavaScript : 그것이하는 일과 중요한 이유 Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? Apr 04, 2025 pm 05:09 PM

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까? 또는: Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Apr 04, 2025 pm 05:36 PM

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Apr 04, 2025 pm 05:12 PM

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...

JavaScript는 배우기가 어렵습니까? JavaScript는 배우기가 어렵습니까? Apr 03, 2025 am 12:20 AM

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.

PowerPoint가 JavaScript를 실행할 수 있습니까? PowerPoint가 JavaScript를 실행할 수 있습니까? Apr 01, 2025 pm 05:17 PM

JavaScript는 PowerPoint에서 실행할 수 있으며 외부 JavaScript 파일을 호출하거나 VBA를 통해 HTML 파일을 포함시켜 구현할 수 있습니다. 1. VBA를 사용하여 JavaScript 파일을 호출하려면 매크로를 활성화하고 VBA 프로그래밍 지식이 있어야합니다. 2. JavaScript가 포함 된 HTML 파일을 포함시켜 간단하고 사용하기 쉽지만 보안 제한이 적용됩니다. 장점에는 확장 된 기능과 유연성이 포함되며, 단점에는 보안, 호환성 및 복잡성이 포함됩니다. 실제로 보안, 호환성, 성능 및 사용자 경험에주의를 기울여야합니다.

See all articles