윅스 (Wix) 코딩 강의 고급 (Advanced) - Chart.js 다루기 (Chart.js Custom Element) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - Chart.js 다루기 (Chart.js Custom Element) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - Chart.js 다루기 (Chart.js Custom Element) - 상호작용 (Interactions)

강의 내용 요약

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

 

웹사이트 내 정보를 차트로 표시하는 기능을 만듭니다.

 

예제 보러가기 (View Example)

# of votes per country

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

 

코드 (Code)

chart-customization.js

export const chartCustomization = {
	label: '# of votes per country',
	borderWidth: 1,
}

 

chart-api.js

import wixSeo from 'wix-seo';

export class ChartJSAPI {
	constructor(elem) {
		this.elem = elem;
	}

	get data() {
		return this._data;
	}

	set data(d) {
		console.log(d);
		this._data = d;
		this.render();
	}

	get customization() {
		return this._customization;
	}

	set customization(c) {
		this._customization = c;
		this.render();
	}

	render() {
		if (this.customization) {
			const { label } = this.customization;
			wixSeo.setTitle(label);
		}

		if (this.data && this.customization) {
			const datasets = Object.assign({}, this.data.datasets[0], this.customization);
			this.data.datasets[0] = datasets;

			this.elem.setAttribute('chart-data', JSON.stringify(this.data));
		}
	}
}

 

chart.js

import Chart from 'chart.js';

class ChartElem extends HTMLElement {
	constructor() {
		super();
		this._shadow = this.attachShadow({ mode: 'open' });
		this._root = document.createElement('canvas');
		this._root.setAttribute("id", "myChart");
		this._root.setAttribute("style", "width: 100%");
		this._shadow.appendChild(this._root);
	}

	static get observedAttributes() {
		return ['chart-data'];
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === 'chart-data') {
			this.chartData = newValue;
		}
	}

	get chartData() {
		return this._chartData;
	}

	set chartData(d) {
		this._chartData = JSON.parse(d);
		sessionStorage.setItem('chartData', d);
		if (this._connected)
			this.render();
	}

	connectedCallback() {
		let savedData = sessionStorage.getItem('chartData');
		if (savedData && savedData !== 'undefined' && !this._chartData)
			this._chartData = savedData;
		this._connected = true;
		if (this._chartData) {
			this.render();
		}
	}

	render() {
		const ctx = this._shadow.getElementById('myChart').getContext('2d');
		const myChart = new Chart(ctx, {
			type: 'bar',
			data: this.chartData,
			options: {
				legend: {
					labels: {
						boxWidth: 0,
					}
				},
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero: true,
						},
					}, ],
				},
			},
		});
	}
}

window.customElements.define('chart-elem', ChartElem);

 

Chart JS

// Copyrights (c) 2018 Chart,js Contributors is provided herein based on the MIT Cicense (MIT). This code includes features bearing an MIT License.

// The MIT License (MIT)

// Copyright (c) 2018 Chart.js Contributors
// Permission is hereby granted, free of charge, to any person obtaining a copy 
// of this software and associated documentation files (the "Software"), to deal 
// in the Software without restriction, including without limitation the rights 
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
// of the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all copies 
// or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

import { ChartJSAPI } from 'public/chart-api';
import { chartCustomization } from 'public/chart-customization';
import wixData from 'wix-data';

$w.onReady(async function () {
	let chart = new ChartJSAPI($w('#CustomElement1'));
	chart.customization = chartCustomization;

	const chartItems = await wixData
		.query("ChartItems")
		.find()
		.then(res => res.items);
	const labels = chartItems.map(item => item.label);
	const data = chartItems.map(item => Number(item.data));
	const backgroundColor = chartItems.map(item => item.backgroundColor);
	const borderColor = chartItems.map(item => item.borderColor);

	chart.data = {
		labels,
		datasets: [{ data, backgroundColor, borderColor }]
	}
});

 

API

$w.CustomElement API

Wix Data API

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 고급 (Advanced) - 드랍다운 다루기 (Dropdown Custom Element) - 상호작용 (Interactions)

윅스 (Wix) 코딩 고급 (Advanced) - 드랍다운 다루기 (Dropdown Custom Element) - 상호작용 (Interactions)

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Chart.js Custom Element | Corvid by Wix Examples | Wix.com