TradingView Chart - Carvi

카비에서 사용할 트레이딩뷰 차트 예제

by 1004lucifer

HTML

<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>

CSS

html,
body {
	font-family: 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
	background: #f9fafb;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tooltip {
	width: 120px;
	height: 24px;
	position: absolute;
	display: none;
	padding: 6px;
	box-sizing: border-box;
	font-size: 11px;
	border-radius: 2px;
	background-color: rgb(76, 175, 80);
	text-align: center;
	z-index: 1000;
	top: 3px;
	left: 10px;
	pointer-events: none;
	color: #fff;
}

JavaScript

document.body.style.position = 'relative';

var container = document.createElement('div');
document.body.appendChild(container);

var width = 600;
var height = 300;

var chart = LightweightCharts.createChart(container, {
	width: 600,
  height: 300,
	rightPriceScale: {
		visible: true,
	},
  leftPriceScale: {
  	visible: true,
  },
	timeScale: {
		visible: true,
	},
	crosshair: {
		horzLine: {
			visible: false,
		},
		vertLine: {
			visible: false,
		},
	},
	layout: {
		backgroundColor: '#fafafa',
	},
	grid: {
		vertLines: {
			color: '#fff',
		},
		horzLines: {
			color: '#fff',
		},
	},
});

var areaSeries = chart.addAreaSeries({
	symbol: 'AAPL',
  topColor: 'rgba(76, 175, 80, 0.5)',
  lineColor: 'rgba(76, 175, 80, 1)',
  bottomColor: 'rgba(76, 175, 80, 0)',
  lineWidth: 2,
});

var volumeSeries = chart.addHistogramSeries({
		priceFormat: {
			type: 'volume',
		},
		priceLineVisible: false,
		color: 'rgba(76, 175, 80, 0.5)',
		priceScaleId: '',
		scaleMargins: {
			top: 0.85,
			bottom: 0,
		},
});

areaSeries.setData([
	{ time: '2018-10-19', value: 219.31 },
	{ time: '2018-10-22', value: 220.65 },
	{ time: '2018-10-23', value: 222.73 },
	{ time: '2018-10-24', value: 215.09 },
	{ time: '2018-10-25', value: 219.80 },
	{ time: '2018-10-26', value: 216.30 },
	{ time: '2018-10-29', value: 212.24 },
	{ time: '2018-10-30', value: 213.30 },
	{ time: '2018-10-31', value: 218.86 },
	{ time: '2018-11-01', value: 222.22 },
	{ time: '2018-11-02', value: 207.48 },
	{ time: '2018-11-05', value: 201.59 },
	{ time: '2018-11-06', value: 203.77 },
	{ time: '2018-11-07', value: 209.95 },
	{ time: '2018-11-08', value: 208.49 },
	{ time: '2018-11-09', value: 204.47 },
	{ time: '2018-11-12', value: 194.17 },
	{ time: '2018-11-13', value: 192.23 },
	{ time: '2018-11-14', value: 186.80 },
	{ time: '2018-11-15', value: 191.41 },
	{ time: '2018-11-16', value: 193.53 },
	{ time: '2018-11-19', value: 185.86 },
	{ time: '2018-11-20', value: 176.98 },
	{ time: '2018-11-21', value: 176.78...