윅스 (Wix) 코딩 강의 고급 (Advanced) - 차트 만들기 (Create a Custom Chart) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 차트 만들기 (Create a Custom Chart) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 차트 만들기 (Create a Custom Chart) - 통합 (Integrations)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 내에 HTML과 자바스크립트를 통해서 엠베딩을 할 수 있는 지에 대해서 알려줍니다.

 

예제 보러가기 (View Example)

Wix Code - Examples

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

 

코드 (Code)

Site Code

$w.onReady(function () {
	//TODO: write your page related code here...
});

 

Home

let year = 2017;
let flights = {
	2014: [6.3, 2.4, 7.6, 5.4, 9.9, 7.8],
	2015: [6.7, 2.2, 11.2, 5.5, 10.1, 7.9],
	2016: [7.2, 3.1, 8.2, 5.6, 9.2, 10.2],
	2017: [7.4, 3.9, 8.8, 6.1, 8.7, 9.8]
};

$w.onReady(() =>{
	$w("#html1").postMessage(flights[year]);
	$w("#html1").onMessage((event)=>{

		if(event.data.type === 'ready'){
			$w("#html1").postMessage(flights[year]);
		}
		
		if(event.data.type === 'click'){
			$w("#clickedMessage").text = `The number of flights to ${event.data.label} in ${year} is ${event.data.value} million.`;
			$w("#clickedMessage").show();
		}
	});	
});

export function year_onChange(event) {
	year = $w('#year').value;
	$w("#html1").postMessage(flights[year]);
}

 

API

$w.Text API

$w.HtmlComponent API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 날씨 위젯 만들기 (Create a Weather Widget) - 통합 (Integrations)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 날씨 위젯 만들기 (Create a Weather Widget) - 통합 (Integrations)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Chart | Corvid Examples by Wix Examples | Wix.com