CanvasJS 산점도

CanvasJS scatter plot, point chart
CanvasJS 산점도

1 예시[ | ]

예제: http://zetawiki.com/ex/js/CanvasJS/scatter.php

<div id="chartContainer" style="height: 300px; width: 100%;">

<script src="//cdnjs.cloudflare.com/ajax/libs/canvasjs/1.4.1/canvas.min.js"></script>
<script type="text/javascript">
window.onload = function() {
	var chart = new CanvasJS.Chart("chartContainer", {
		title:{
			text: "서버 성능",
			fontSize: 20
		},
		axisX: {
			title:"서버 부하 (TPS)",
			titleFontSize: 18				
			
		},
		axisY:{
			title: "응답 시간 (초)",
			titleFontSize: 16				
		},
		legend: {
			verticalAlign: 'bottom',
			horizontalAlign: 'center'
		},

		data: [
		{        
			type: 'scatter',
			color: '#778899',
			markerType: "circle", 
		  toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong> 부하</strong> {x} <br/><strong> 응답</strong></span> {y}sec",
		  
			name: "서버 Pluto",
			showInLegend: false,  
			dataPoints: [
			
			{ x: 23, y: 4 },
			{ x: 28, y: 5 },
			{ x: 39, y: 9 },
			{ x: 34, y: 8 },
			{ x: 24, y: 3 },
			]
		}
		],
	  legend:{
		cursor: 'pointer',
		itemclick : function(e) {
		  if (typeof(e.dataSeries.visible) === 'undefined' || e.dataSeries.visible) e.dataSeries.visible = false;              
		  else e.dataSeries.visible = true;              
		  chart.render();
		}
	  }
	});
	chart.render();
}
</script>

2 같이 보기[ | ]

3 참고[ | ]

http://canvasjs.com/html5-javascript-scatter-point-chart/