canvasjs 의 line chart (꺾은 선형 차트)

 

꺾은 선형 차트는 차트에서 두 개 이상의 스케일 플로팅을 지원합니다. 이 기능은 한 데이터 시리즈에서 다른 데이터 시리즈로 매우 다양하고 축이있는 다른 모든 그래프에서 지원되는 그래프에서 값을 플로팅 할 때 매우 유용합니다. 주어진 예는 여러 Y 축을 사용하여 다른 스케일을 나타내는 라인 차트를 보여줍니다. 또한 브라우저에서 편집하거나 저장하여 로컬에서 실행할 수있는 소스 코드도 포함되어 있습니다.

 

canvasjs.com/javascript-charts/

Beautiful JavaScript Charts | 10x Fast | 30+ JS Chart Types

 

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-charts/line-chart-multiple-axis/" target="_blank" title="JavaScript Line Charts with Multiple Axes ">https://canvasjs.com/javascript-charts/line-chart-multiple-axis/</a></div>

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title:{
		text: "Gold Medals Won in Olympics"             
	}, 
	axisY:{
		title: "Number of Medals"
	},
	toolTip: {
		shared: true
	},
	legend:{
		cursor:"pointer",
		itemclick: toggleDataSeries
	},
	data: [{        
		type: "spline",  
		name: "최종",        
		showInLegend: true,
		dataPoints: [
			{ label: "seoul1" , y: 44 },     
			{ label:"seoul2", y: 37 },     
			{ label: "seoul3", y: 36 }
		]
	}, 
	{        
		type: "spline",
		name: "임시",        
		showInLegend: true,
		dataPoints: [
			{ label: "seoul1" , y: 16 },     
			{ label:"seoul2", y: 28 },     
			{ label: "seoul3", y: 32 }
		]
	}]
});

chart.render();

function toggleDataSeries(e) {
	if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;            
	}
	chart.render();
}

}

 

 

 

 

 

해당 차트는 유료제품이며, 무료로 제공해 주는 대상은 스타트업 업체나 상용적으로 사용하지 않은 곳이나 학생들 이라고 합니다. ^^