77 lines
1.8 KiB
Markdown
77 lines
1.8 KiB
Markdown
# uChart
|
||
|
||
Lightweight, canvas‑based charting library written in TypeScript, designed for real‑time data streams and small bundle size.
|
||
|
||
|
||
|
||
## Features
|
||
|
||
- 💡 **Zero external rendering deps** – plain `<canvas>`
|
||
- ⚡ **Real‑time friendly** – redraws only what’s needed
|
||
- 📦 **ESM ready** – authored as native ES modules
|
||
- 📝 **TypeScript types** included (`*.d.ts`)
|
||
- 🎛️ Configurable axes, ticks, colors & cursor read‑outs
|
||
|
||
## Installation
|
||
|
||
```bash
|
||
npm install uchart
|
||
```
|
||
|
||
|
||
## Quick strart
|
||
```html
|
||
<!-- test.html (included in the repo) -->
|
||
<!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 sine(len, shift, amp, off, f=1){
|
||
const now=Date.now(), d=[];
|
||
for(let i=0;i<len;i++){
|
||
const t=now+i*10, x=i/len*2*Math.PI*f, y=Math.sin(x+shift)*amp+off;
|
||
d.push([t,y]);
|
||
}
|
||
return d;
|
||
}
|
||
|
||
function update(){
|
||
chart.setSeries([
|
||
{ data: sine(1500, phase, 20, 10, 1), strokeColor:'#0f0' },
|
||
{ data: sine(1500, phase, 20, 10, 2), strokeColor:'#f00' },
|
||
{ data: sine(1500, phase, 20, 10, 0.5), strokeColor:'#00f' }
|
||
]);
|
||
phase += 0.01;
|
||
}
|
||
update();
|
||
setInterval(update, 50);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## Test
|
||
During development you can run a live dev server:
|
||
|
||
```bash
|
||
npm run serve
|
||
```
|