Nonstop Perpetual Motion

    svg-ssr

    1.2.2 • Public • Published

    SVG-SSR

    SVG server-side rendering module for Node.js.

    You can build pie, bar, scatter and line charts in Node.js.

    Install:

    npm install svg-ssr

    Init in Browser:

    //after import client/js/chart.js
    var setting = {
        type : 'line', //type, required
        tooltip : true, //has tooltip
        tooltipTrigger: false,//show the tooltip when has it
        tooltipMaker: undefined,//tooltip html maker function with parameters 'dot' and 'svg dom'
        callback: undefined,//the callback function of click on item
        moveTrigger: true,//trigger callback when move in axis
        defaultEvent: true//whether use defaute events on item
    }
    myChart(document.getElementById('lineChart'), setting);

    CSS Import:

    @import "svg-ssr/client/css/theme.css";
    

    Example In Node.js:

    import chart from 'svg-ssr';
    // it can be just a string and it will be setted as id
    let config = {
        id : 'chart_'+(new Date()).getTime(), // whatever
        debug: false, // if you want log time in terminal you can set it to true
        box : {
            width: 100, //not valid in pie chart
            height: 100 //not valid in pie chart
        }
    }
    let chartSVGCode = chart.pie(data [, config]);

    API:

    • Pie Chart:

      chart.pie(data [, config])
      • data example
      {
          value: [ 46.6, 38.9, 14.6 ],
          color: [ '#FF574D', '#3E8FF1', '#2BC7FF' ],//not required
          name: [ 'type 1', 'type 2', 'type 3' ],
          unit: '%'//not required
      }
    • Bar Chart:

      chart.bar(data [, config])
      • data example
      {
          series: [
              { data: [
              {
                  xValue: '20',
                  yValue: 7.3
              },
              {
                  xValue: '20~24',
                  yValue: 31.7
              }]
              }
          ],
          xAxis: {
              type: 'category',
              data: [ '20', '20~24', '25~29', '30~34', '35~39', '40' ]
          },
          yAxis: {
              type: 'linear',
              data: [ 40, 0 ],
              unit: '%' //not required
          }
      }
    • Scatter Chart:

      chart.scatter(data [, config])
      • data example
      {   
          xAxis:
              { type: 'time',
              data:
              [   20170524,
                  20170525,
                  ...]
              },
          yAxis:
              { type: 'points',
              data: [ 123, 345, ... ]},
          series:[
              {data:[
              { yValue: 23160,
                  label: 'sth...',
                  tooltip: '2017-06-22 23160',
                  xValue: 20170524 },
              { yValue: 17556,
                  label: '',
                  tooltip: '2017-06-23 17556',
                  xValue: 20170525 }
              ]}
          ]
      }    
    • Line Chart:

      chart.line(data [, config])
      • data example
      {   
          xAxis:
              { type: 'time',
              data:
              [   20170524,
                  20170525,
                  ...]
              },
          yAxis:
              { type: 'points',
              data: [ 123, 345, ... ]},
          tooltip: { pointIndex: 14 },
          series:[
              {
              name: '票房',//not required, if you need legend you should give it to me
              color: '#010101', //not required
              data:[
              { yValue: 3160,
                  tooltip: '2017-06-22 3160',
                  xValue: 20170524 },
              { yValue: 7556,
                  tooltip: '2017-06-23 7556',
                  xValue: 20170525 }
              ]},
              {data:[
              { yValue: 60000,
                  tooltip: '2017-06-22 6',
                  xValue: 20170524 },
              { yValue: 80000,
                  tooltip: '2017-06-23 8',
                  xValue: 20170525 }
              ]}
          ]
      } 
    • Area Chart:

      chart.area(data [, config])
      • data example
      {   
          xAxis:
              { type: 'time',
              data:
              [   20170524,
                  20170525,
                  ...]
              },
          yAxis:
              { type: 'points',
              data: [ 123, 345, ... ]},
          tooltip: { pointIndex: 14 },
          series:[
              {data:[
              { yValue: 3160,
                  tooltip: '2017-06-22 3160',
                  xValue: 20170524 },
              { yValue: 7556,
                  tooltip: '2017-06-23 7556',
                  xValue: 20170525 }
              ]},
              {data:[
              { yValue: 60000,
                  tooltip: '2017-06-22 6',
                  xValue: 20170524 },
              { yValue: 80000,
                  tooltip: '2017-06-23 8',
                  xValue: 20170525 }
              ]}
          ]
      } 

    Notice

    • axis has 4 types include 'category', 'time', 'linear' and 'points', the definition is similar to d3
    • when the type of axis is 'time', you should provide a Date array
    • x axis can use all of 4 types
    • y axis can only use 'linear', 'points'

    Install

    npm i svg-ssr

    DownloadsWeekly Downloads

    39

    Version

    1.2.2

    License

    (LGPL-2.0 or MIT)

    Last publish

    Collaborators

    • zeligzhou