当前位置：首页 > 网页特效 > svg

基于svg的手绘风格图表插件

分类：svg 日期：2024-05-14 点击(0) 评论(0)

基于svg的手绘风格图表插件

简介

在HTML文件中引入下面的文件。

```html
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>  
```
#####  HTML结构
```html
<svg class="myChart"></svg>
```
#####  javascript
```html
import chartXkcd from 'chart.xkcd';
const myChart = new chartXkcd.Line(svg, {...});
```
柱状图：

```html
const svg = document.querySelector('.myChart');
 
new chartXkcd.Bar(svg, {
  // title: 'Monthly income of an indie developer',
  // xLabel: 'Month',
  // yLabel: '$ Dollors',
  data: {
    labels: ['github stars', 'patrons'],
    datasets: [{
      // label: 'Battle',
      data: [100, 2],
    }],
  },
});
```
折线图：

```html
new chartXkcd.Line(svg, {
  // title: 'Monthly income of an indie developer',
  // xLabel: 'Month',
  // yLabel: '$ Dollors',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    datasets: [{
      label: 'Plan',
      data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
    }, {
      label: 'Reality',
      data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
    // // }, {
    // //   label: 'vivi',
    // //   data: [5, 12, 20, 7, 10,  35,15, 9, 20, 9, 10, 6],
    // }, {
      // label: 'weweyang',
      // data: [10, 20, 7, 12,  10, 15, 9, 20, 35, 9, 6, 17],
    }],
  },
});
```
散点图：

```html
const svg = document.querySelector('.xy-chart');
 
new chartXkcd.XY(svg, {
  title: 'Pokemon farms', //optional
  xLabel: 'Coodinate', //optional
  yLabel: 'Count', //optional
  data: {
    datasets: [{
      label: 'Pikachu',
      data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
    }, {
      label: 'Squirtle',
      data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
    }],
  }
});
```
饼状图：

```html
new chartXkcd.Pie(svg, {
  // title: 'What Tim made of',
  data: {
    labels: ['a', 'b', 'e', 'f', 'g'],
    datasets: [{
      data: [500, 200, 80, 90, 100],
    }],
  },
});
```
可用配置参数：

```html
new chartXkcd.Method(svg, {
    data: {
      // data here
    },
    options: {
      xTickCount: 3
      yTickCount: 3,
      legendPosition: chart.Xkcd.positionType.upLeft // or upRight
      dataColors: [], // an array of colors
      fontFamily: '', // font family
      showLine: false, // for Scatter chart
      timeFormat: undefined, // for Scatter chart, checkout the dayjs
      dotSize: 1, // for Scatter chart
      innerRadius: .5 // for Dount/Pie chart
 
    }
});
```

web299.com

基于svg的手绘风格图表插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果