ljh-charts v1.0.0
sChart.js
:bar_chart: Small & simple HTML5 charts
Demo
Doc
Chart Types
The following chart types are implemented:
- Bar Charts
- Line Charts
- Pie Charts
- Ring Charts
Usage
Install:
npm install schart.js
Create a Canvas element with an id attribute, width and height:
<canvas id="canvas" width="500" height="400"></canvas>
Initialize the chart using Javascript:
new sChart(canvasId, type, data, options)
Take bar charts for example:
// Bar Charts
var data = [
{name:'2014', value:2260},
{name:'2015', value:1170},
{name:'2016', value:970},
{name:'2017', value:1450}
]
new sChart('canvas', 'bar', data, {
title: '商店近年营业总额' // The title of a bar chart
});
Options
title
String.The title of chart. Default is null.
titleColor
String.Title Color. Default is '#000000'.
titlePosition
String.Title position. Default is 'top'.
bgColor
String.The background color of chart. Default is '#ffffff'.
padding
Number.Inside margin of chart. Default is 50.
yEqual
Number.The number of points on the Y axis. Default is 5.
fillColor
String.The color of bar chart or line chart. Default is '#1E9FFF'.
axisColor
String.The color of the coordinate axis. Default is '#666666'.
contentColor
String.The color of the horizontal lines of the content. Default is '#eeeeee'.
radius
Number.The radius of a pie chart or ring chart. Default is 100.
innerRadius
Number.The inner radius of a ring chart. Default is 700.
colorList
Array.The color list of a pie chart or ring chart. Default is '#1E9FFF', '#13CE66', '#F7BA2A', '#FF4949', '#72f6ff';
legendColor
String.The color of the legend text. Default is '#000000'.
legendTop
Number.Legend position of top. Default is 40.
Relevant
vue-schart : Vue.js wrapper for sChart.js
License
7 years ago