Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taylorpzreal/smart-chart
d3 charts
https://github.com/taylorpzreal/smart-chart
d3 d3v4 svg
Last synced: 17 days ago
JSON representation
d3 charts
- Host: GitHub
- URL: https://github.com/taylorpzreal/smart-chart
- Owner: TaylorPzreal
- License: mit
- Created: 2017-10-22T06:51:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T14:10:28.000Z (about 2 years ago)
- Last Synced: 2024-11-21T05:17:01.173Z (3 months ago)
- Topics: d3, d3v4, svg
- Language: TypeScript
- Homepage:
- Size: 1.24 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# smart-chart
> A chart library comprises other charts like echarts, d3 etc.
[](http://makeapullrequest.com) [](https://badge.fury.io/gh/TaylorPzreal%2Fsmart-chart)
[](https://badge.fury.io/js/smart-chart)
> Note that the smart-chart dependent on ```echarts```, you should install it separately.
Update records
|Features|Version|Date|
|---|---|---|
|Line, Bar, Horizontal Bar, Pie, Download|2.0.0-alpha.1|2020/09/03|
|DataZoom, Auto Resize|2.0.0-alpha.2|2020/09/08|
|MapChart + BarChart|2.0.0-alpha.3|2020/09/21|
## Installition
```bash
npm i -S smart-chart
```
## Usage
A common chart that you can switch chart type: line, bar, horizontal bar, pie. You just need one data structure.
```ts
import { Chart, XConfiguration, XChartType, XDataSerial } from 'smart-chart';
const chart = new Chart(document.getElementById('chart') as HTMLDivElement);
function changeChartType() {
const types = Object.values(XChartType);
const type = types[this.nextType++ % types.length];
const configuration: XConfiguration = {
type,
serials: [
{
name: 'item1',
data: [['2020-09-01', 11], ['2020-09-02', 17], ['2020-09-03', 17]],
},
{
name: 'item2',
data: [['2020-09-01', 17], ['2020-09-02', 13], ['2020-09-03', 14]],
},
{
name: 'item3',
data: [['2020-09-01', 7], ['2020-09-02', 13], ['2020-09-03', 13]],
}
],
};
chart.render(configuration);
}
```
### Download image
```ts
chart.download('Saved file name').then((v: string) => {
console.log(v);
}).catch((e: Error) => {
console.log(e);
});
```
### Or use it in JS
```html
```
```js
const chart = new SmartChart.Chart(document.getElementById('chart'));
```
### MapChart
```ts
import { ChinaMap, XGeoConfiguration, XGeoData } from 'smart-chart';
const chart = new ChinaMap(document.getElementById('chart') as HTMLDivElement);
const mockData: XGeoConfiguration = {
data: [
{
name: 'A',
value: 10,
coords: [118.8062, 31.9208],
},
{
name: 'B',
value: 32,
coords: [127.9688, 45.368],
},
{
name: 'C',
value: 43,
coords: [110.3467, 41.4899],
},
{
name: 'D',
value: 54,
coords: [125.8154, 44.2584],
},
],
targetCoords: [103.5901, 36.3043],
mapName: '区域数据',
topName: 'Top 6',
barName: 'Top 20',
}
chart.renderChart(mockData);
```
## Examples
