three-d-charts

    2.0.1 • Public • Published

    3D charts library, using Three.js

    Features

    • bar-chart
    • bar-chart-2-args
    • china-province-bar-chart
    • city-route-chart
    • scatter-chart
    • tile-map-tool

    bar-chart bar-chart-2-args china-province-bar-chart city-route-chart scatter-chart

    Demos online

    https://zhaokang555.github.io/three-d-charts-demos

    Install

    Use npm

    npm i three-d-charts --save

    import {BarChart, BarChart2Args, ChinaProvinceBarChart, CityRouteChart, ScatterChart, tileMapTool} from 'three-d-charts';

    Global import in browser

    <script src="path/to/three-d-charts"></script>
    <script>
    const {BarChart, BarChart2Args, ChinaProvinceBarChart, CityRouteChart, ScatterChart, tileMapTool} = window.ThreeDCharts;
    </script>

    API

    class BarChart {
        constructor(list: IList, container: HTMLElement);
        render: () => void;
        clean(): void;
    }
    class BarChart2Args {
        constructor(lists: Array<IList>, container: HTMLElement);
        render: () => void;
        clean(): void;
    }
    class ChinaProvinceBarChart {
        constructor(list: IList, container: HTMLElement);
        render: () => void;
        clean(): void;
    }
    class CityRouteChart {
        constructor(list: Array<IRoute>, container: HTMLElement, extraCities: Array<ICity> = []);
        render: () => void;
        clean(): void;
    }
    class ScatterChart {
        constructor(list: Array<IPosition>, container: HTMLElement);
        render: () => void;
        clean(): void;
    }
    tileMapTool: (tileWidth = 3600, tileHeight = 3600, colIdxOffset = 0, rowIdxOffset = 0) => HTMLInputElement
    
    // types and interfaces
    type IList = Array<{
      key: string;
      value: number;
    }>;
    interface IRoute {
        from: string;
        to: string;
        weight: number;
    }
    interface ICity {
        name: string;
        coordinates: ICoordinates;
    }
    type ICoordinates = [number, number];

    Local run demos

    • npm i
    • npm run dev
    • open localhost:1234/index.html

    Build demos

    • npm run build:demos note: remember move three-d-charts-demos/Alibaba_PuHuiTi_Regular.json to your server / path since I used parcel-plugin-static-files-copy

    Keywords

    none

    Install

    npm i three-d-charts

    DownloadsWeekly Downloads

    1

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    134 MB

    Total Files

    90

    Last publish

    Collaborators

    • zhaokang