BenoitCier
/
Opendistrib
派生自 Laclic/Souke


			
				
					
						
						
							
							<!doctype html>
<html>

<head>
    <title>Scatter Chart</title>
    <script src="../dist/Chart.bundle.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width:75%">
        <div>
            <canvas id="canvas"></canvas>
        </div>
    </div>
    <script>
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
    };
    var randomColor = function(opacity) {
        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
    };

    var scatterChartData = {
        datasets: [{
            label: "V(node2)",
			data: [{
				x: 1,
				y: -1.711e-2,
			}, {
				x: 1.26,
				y: -2.708e-2,
			}, {
				x: 1.58,
				y: -4.285e-2,
			}, {
				x: 2.0,
				y: -6.772e-2,
			}, {
				x: 2.51,
				y: -1.068e-1,
			}, {
				x: 3.16,
				y: -1.681e-1,
			}, {
				x: 3.98,
				y: -2.635e-1,
			}, {
				x: 5.01,
				y: -4.106e-1,
			}, {
				x: 6.31,
				y: -6.339e-1,
			}, {
				x: 7.94,
				y: -9.659e-1,
			}, {
				x: 10.00,
				y: -1.445,
			}, {
				x: 12.6,
				y: -2.110,
			}, {
				x: 15.8,
				y: -2.992,
			}, {
				x: 20.0,
				y: -4.102,
			}, {
				x: 25.1,
				y: -5.429,
			}, {
				x: 31.6,
				y: -6.944,
			}, {
				x: 39.8,
				y: -8.607,
			}, {
				x: 50.1,
				y: -1.038e1,
			}, {
				x: 63.1,
				y: -1.223e1,
			}, {
				x: 79.4,
				y: -1.413e1,
			}, {
				x: 100.00,
				y: -1.607e1,
			}, {
				x: 126,
				y: -1.803e1,
			}, {
				x: 158,
				y: -2e1,
			}, {
				x: 200,
				y: -2.199e1,
			}, {
				x: 251,
				y: -2.398e1,
			}, {
				x: 316,
				y: -2.597e1,
			}, {
				x: 398,
				y: -2.797e1,
			}, {
				x: 501,
				y: -2.996e1,
			}, {
				x: 631,
				y: -3.196e1,
			}, {
				x: 794,
				y: -3.396e1,
			}, {
				x: 1000,
				y: -3.596e1,
			},]
        }]
    };

    $.each(scatterChartData.datasets, function(i, dataset) {
        dataset.borderColor = randomColor(0.4);
        dataset.backgroundColor = randomColor(0.1);
        dataset.pointBorderColor = randomColor(0.7);
        dataset.pointBackgroundColor = randomColor(0.5);
        dataset.pointBorderWidth = 1;
    });

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myScatter = Chart.Scatter(ctx, {
        	data: scatterChartData,
        	options: {
        		title: {
	                display: true,
	                text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
	            },
	            scales: {
	            	xAxes: [{
	            		type: 'logarithmic',
	            		position: 'bottom',
	            		ticks: {
	            			userCallback: function(tick) {
	            				var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
	            				if (remain === 1 || remain === 2 || remain === 5) {
	            					return tick.toString() + "Hz";
	            				}
	            				return '';
	            			},
	            		},
	            		scaleLabel: {
	            			labelString: 'Frequency',
	            			display: true,
	            		}
	            	}],
	            	yAxes: [{
	            		type: 'linear',
	            		ticks: {
	            			userCallback: function(tick) {
	            				return tick.toString() + "dB";
	            			}
	            		},
	            		scaleLabel: {
	            			labelString: 'Voltage',
	            			display: true
	            		}
	            	}]
	            }
            }
        });
    };
    </script>
</body>

</html>