g2d-chart
Version:
g2-chart - Charts for g2
61 lines (56 loc) • 2.24 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>g2 - markers on chart</title>
<style> canvas { border: 1px solid #000; } </style>
</head>
<body>
<h1>g2 - markers on chart</h1>
<canvas id="c" width="400" height="230"></canvas><br>
<input id="range" type="range" style="min-width:375px;vertical-align:middle;margin:0;padding:0" min="-90" max="360" value="-90" step="1" />
<output id="output" for="phi" style="text-align:right;">-90°</output>
<script src="https://gitcdn.xyz/repo/goessner/g2/master/g2.min.js"></script>
<script src="https://gitcdn.xyz/repo/goessner/g2-chart/master/g2.chart.min.js"></script>
<script>
function setPhi(e) {
if (dirty = (range.value !== output.value)) {
output.value = range.value + "°";
phi = range.value/180*Math.PI;
markers = ch.markersAt(phi);
}
return true;
};
function render() {
if (dirty) {
gmrk.del().cpy(ch.drawMarkersAt(gmrk,phi));
g.exe(ctx);
dirty = false;
}
requestAnimationFrame(render);
}
var ctx = document.getElementById("c").getContext("2d"),
range = document.getElementById("range"),
output = document.getElementById("output"),
xA0 = 100, yA0 = 100, a = 80, b = 200, e = 30, xA, yA, xB, yB,
dirty = true,
phi = -Math.PI/2,
ch = g2.Chart.create({x:100,y:50,b:200,h:150,
xmin:-Math.PI/2,xmax:2*Math.PI,
ymin:-0.75,ymax:0.75,
funcs:[
{fn:Math.sin,dx:Math.PI/30,fill:true},
{fn:Math.cos,dx:Math.PI/30,fill:true},
],
title:{text:"sine + cosine (clipped)"},
xaxis:{title:{text:"phi"}},
yaxis:{title:{text:"sin(phi)"},origin:true}}),
gmrk = g2(),
g = g2().clr().cartesian()
.chart(ch)
.use(gmrk);
range.addEventListener("input",setPhi,false);
render();
</script>
</body>
</html>