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.jsvar 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;
CSS Import:
@import "svg-ssr/client/css/theme.css";
Example In Node.js:
;// it can be just a string and it will be setted as idlet config = id : 'chart_'+ // 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;
API:
-
Pie Chart:
chart- data example
value: 466 389 146color: '#FF574D' '#3E8FF1' '#2BC7FF' //not requiredname: 'type 1' 'type 2' 'type 3'unit: '%'//not required -
Bar Chart:
chart- data example
series:data:xValue: '20'yValue: 73xValue: '20~24'yValue: 317xAxis:type: 'category'data: '20' '20~24' '25~29' '30~34' '35~39' '40'yAxis:type: 'linear'data: 40 0unit: '%' //not required -
Scatter Chart:
chart- data example
xAxis:type: 'time'data:2017052420170525...yAxis:type: 'points'data: 123 345 ...series:data:yValue: 23160label: 'sth...'tooltip: '2017-06-22 23160'xValue: 20170524yValue: 17556label: ''tooltip: '2017-06-23 17556'xValue: 20170525 -
Line Chart:
chart- data example
xAxis:type: 'time'data:2017052420170525...yAxis:type: 'points'data: 123 345 ...tooltip: pointIndex: 14series:name: '票房'//not required, if you need legend you should give it to mecolor: '#010101' //not requireddata:yValue: 3160tooltip: '2017-06-22 3160'xValue: 20170524yValue: 7556tooltip: '2017-06-23 7556'xValue: 20170525data:yValue: 60000tooltip: '2017-06-22 6'xValue: 20170524yValue: 80000tooltip: '2017-06-23 8'xValue: 20170525 -
Area Chart:
chart- data example
xAxis:type: 'time'data:2017052420170525...yAxis:type: 'points'data: 123 345 ...tooltip: pointIndex: 14series:data:yValue: 3160tooltip: '2017-06-22 3160'xValue: 20170524yValue: 7556tooltip: '2017-06-23 7556'xValue: 20170525data:yValue: 60000tooltip: '2017-06-22 6'xValue: 20170524yValue: 80000tooltip: '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'