https://github.com/play175/pure-js-chart
pure js line-chart render to png ,no canvas or any browser apis, all in javascript （纯粹使用js实现的一个线形图表，可以直接输出png，不使用canvas或者其他浏览器接口，只有js）
https://github.com/play175/pure-js-chart
canvas chart dataurl js line-chart png pure pure-javascript reactnative
Last synced: about 2 months ago
JSON representation
pure js line-chart render to png ,no canvas or any browser apis, all in javascript （纯粹使用js实现的一个线形图表，可以直接输出png，不使用canvas或者其他浏览器接口，只有js）
- Host: GitHub
- URL: https://github.com/play175/pure-js-chart
- Owner: play175
- Created: 2020-03-20T17:38:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-11T14:00:34.000Z (about 5 years ago)
- Last Synced: 2025-03-18T12:34:25.087Z (2 months ago)
- Topics: canvas, chart, dataurl, js, line-chart, png, pure, pure-javascript, reactnative
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pure-js-chart
pure js line-chart render to png ,no canvas or any browser apis, all in javascript
纯粹使用js实现的一个线形图表，可以直接输出png，不使用canvas或者其他浏览器接口，只有js
## usage
```js
const chart = require('./chart').create({width: 500, height: 200});
let datas = [24, 57, 70, 100, 130, 120, 110, 170, 160, 110];
let pngArrayBuffer = chart.draw(datas);
//save to file
require('fs').writeFileSync('output.png', Buffer.from(pngArrayBuffer));
//or covert to dataurl
let dataURL = 'data:image/png;base64,' + Buffer.from(pngArrayBuffer).toString('base64');
```
react native example:https://snack.expo.io/Cs2ScHaBC
```js
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import { create } from 'pure-js-chart';
import { Buffer } from 'buffer';
const chart = create({ width: 500, height: 200 });
export default class App extends Component {
constructor(props) {
super(props);
let datas = [24, 57, 70, 100, 130, 120, 110, 170, 160, 110];
let pngArrayBuffer = chart.draw(datas);
let dataURL =
'data:image/png;base64,' + Buffer.from(pngArrayBuffer).toString('base64');
this.state = {
img: dataURL,
};
}
render() {
return (
Hello, world!
);
}
}
```
## thanks to
- [Xiaolin Wu's line algorithm](https://en.wikipedia.org/wiki/Xiaolin_Wu%27s_line_algorithm)
- [Dr. Dobb's Journal.Bresenham's algorithm ](https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm)
- [UPNG](https://github.com/photopea/UPNG.js)
- [pako](https://github.com/nodeca/pako)
## author
https://github.com/play175/pure-js-chart