📊 Small & simple HTML5 charts
The following chart types are implemented:
- Bar Charts
- Line Charts
- Pie Charts
- Ring Charts
npm install schart.js
new sChart(canvasId, type, data, options)<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script src="sChart.min.js"></script>
<script>
// 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
});
</script>
</body><body>
<div class="schart-wrapper" style="width: 7rem;height: 4rem">
<canvas id="canvas"></canvas>
</div>
<script src="sChart.min.js"></script>
<script>
var data = [
{name:'2014', value:2260},
{name:'2015', value:1170},
{name:'2016', value:970},
{name:'2017', value:1450}
]
new sChart('canvas', 'bar', data, {
title: '商店近年营业总额',
autoWidth: true // 设置宽高自适应父元素宽高
});
</script>
</body>String.The title of chart. Default is null.
String.Title Color. Default is '#000000'.
String.Title position. Default is 'top'.
Display the value in the chart. Default is true.
Adaptive width and height. Default is false.
String.The background color of chart. Default is '#ffffff'.
Number.Inside top margin of chart. Default is 50.
Number.Inside bottom margin of chart. Default is 50.
Number.Inside left margin of chart. Default is 50.
Number.Inside right margin of chart. Default is 0.
Number.The number of points on the Y axis. Default is 5.
String.The color of bar chart or line chart. Default is '#1E9FFF'.
String.The color of the coordinate axis. Default is '#666666'.
String.The color of the horizontal lines of the content. Default is '#eeeeee'.
Number.The radius of a pie chart or ring chart. Default is 100.
Number.The inner radius of a ring chart. Default is 700.
Array.The color list of a pie chart or ring chart. Default is ['#1E9FFF', '#13CE66', '#F7BA2A', '#FF4949', '#72f6ff'];
String.The color of the legend text. Default is '#000000'.
Number.Legend position of top. Default is 40.
vue-schart : Vue.js wrapper for sChart.js