Wondering what’s next for npm?Check out our public roadmap! »

    smart-chart
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    smart-chart

    A chart library comprises other charts like echarts, d3 etc.

    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
    Line Support AreaStyle, Pie support top statistic 2.0.0-alpha.5 2020/10/19
    Release 2.0.0 2.0.0 2020/11/13
    Line & Pie support config colors 2.1.0 2020/12/08
    Chart support get instance 2.2.0 2021/01/18

    Installition

    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.

    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]],
          }
        ],
        optionConfiguration: {
          useDataZoom: false,
          useAreaStyle: false,
          pieTopCount: 0,
        },
      };
      chart.render(configuration);
    }

    Download image

    chart.download('Saved file name').then((v: string) => {
      console.log(v);
    }).catch((e: Error) => {
      console.log(e);
    });

    Or use it in JS

    <script src="path/to/dist/index.js"></script>
    const chart = new SmartChart.Chart(document.getElementById('chart'));

    MapChart

    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

    mapChart Line Bar Horizontal Bar Pie

    Install

    npm i smart-chart

    DownloadsWeekly Downloads

    6

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    777 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar