mysql 샘플 테이블 + 쿼리 연습 문제

-
http://java-school.net/jdbc/SQL-SELECT-Statement CREATE TABLE DEPT (     DEPTNO DECIMAL ( 2 ),     DNAME VARCHAR ( 14 ),     LOC VARCHAR ( 13 ),     CONSTRAINT PK_DEPT PRIMARY KEY ( DEPTNO ) ); CREATE TABLE EMP (     EMPNO DECIMAL ( 4 ),     ENAME VARCHAR ( 10 ),     JOB VARCHAR ( 9 ),     MGR DECIMAL ( 4 ),     HIREDATE DATE ,     SAL DECIMAL ( 7 , 2 ),     COMM DECIMAL ( 7 , 2 ),     DEPTNO DECIMAL ( 2 ),     CONSTRAINT PK_EMP PRIMARY KEY ( EMPNO ),     CONSTRAINT FK_DEPTNO FOREIGN KEY ( DEPTNO ) REFERENCES DEPT ( DEPTNO ) ); CREATE TABLE SALGRADE (     GRADE TINYINT ,     LOSAL SMALLINT ,     HISAL SMALLINT ); INSE...

Vue.js + toast ui

-

Vue.js + Toast ui Charts



작업 중인 Vue.js 프로젝트에서 Toast ui를 사용해 차트를 보여주려고 한다.

http://ui.toast.com/tui-chart

toast 에서 시키는대로 해보자


1. 터미널에서 인스톨. 나는 npm 이니까 npm에 나와있는걸로.
npm
$ npm install --save tui-chart # Latest version
$ npm install --save tui-chart@<version> # Specific version
bower
$ bower install tui-chart # Latest version
$ bower install tui-chart#<tag> # Specific version


2. 설치가 완료되면 node_module 안에 설치된걸 확인할 수 있다.



















3. 이제 화면에 뿌려보자 (List.vue)

<template>
<div>
<div id="chart" ref="chartarea">차트 컨테이너 div</div>
</div>
</template>
<style lang="scss" scoped>
</style>
<script>
import Vue from 'vue'
import tuiChart from 'tui-chart'
Vue.use(tuiChart)
export default {
name: 'List',
mounted () {
this.drawChart()
},
methods: {
drawChart () {
var container = this.$refs.chartarea
var data = {
categories: ['cate1', 'cate2', 'cate3'],
series: [
{
name: 'Legend1',
data: [20, 30, 50]
},
{
name: 'Legend2',
data: [40, 40, 60]
},
{
name: 'Legend3',
data: [60, 50, 10]
},
{
name: 'Legend4',
data: [80, 10, 70]
},
{
name: 'Legend5',
data: [10, 10, 50]
}
]
}
var options = {
chart: {
width: 500,
height: 400,
title: 'Chart Title'
},
yAxis: {
title: 'Y Axis Title'
},
xAxis: {
title: 'X Axis Title'
}
}
tuiChart.lineChart(container, data, options)
// console.log(tuiChart) 찍어보면 차트 이름들이 나옴. 그중에 골라서씀.
}
}
}
</script>





4. 결과


오오 잘 나온다!