49 lines
1.4 KiB
HTML
49 lines
1.4 KiB
HTML
<!-- test.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>uChart Interactive Test</title>
|
|
<style>
|
|
#chartContainer { width: 1000px; height: 400px; margin: 20px auto; background:#111; }
|
|
body { background:#222; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chartContainer"></div>
|
|
|
|
<script type="module">
|
|
import { createChartElement } from './dist/uchart.js';
|
|
|
|
const container = document.getElementById('chartContainer');
|
|
const chart = createChartElement([], { showYAxis:true, yTicks:5 });
|
|
container.appendChild(chart.element);
|
|
|
|
let phase = 0;
|
|
|
|
function generateSineSeries(len, shift, amp, off, freq = 1){
|
|
const now = Date.now();
|
|
const data=[];
|
|
for(let i=0;i<len;i++){
|
|
const t = now + i*10;
|
|
const x = i/len*2*Math.PI*freq;
|
|
const y = Math.sin(x+shift)*amp + off;
|
|
data.push([t,y]);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function update(){
|
|
chart.setSeries([
|
|
{ data: generateSineSeries(1500, phase, 20, 10, 1), strokeColor:'#0f0' },
|
|
{ data: generateSineSeries(1500, phase, 20, 10, 2), strokeColor:'#f00' },
|
|
{ data: generateSineSeries(1500, phase, 20, 10, 0.5), strokeColor:'#00f' }
|
|
]);
|
|
phase += 0.01;
|
|
}
|
|
update()
|
|
setInterval(update, 50);
|
|
</script>
|
|
</body>
|
|
</html>
|