帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery smartGraph 图标图形插件,可创建函数图形

帝国模板之家 2020-11-02 网页特效 评论

smartGraph是一个功能强大的jQuery插件,  非常方便的生成可拖拽、缩放的数学函数的图形。

使用方法:

1.引入jquery库和smartGraph插件文件,css样式文件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/js/jquery.smartGraph.min.js"></script>
<link rel="stylesheet" href="/path/to/dist/css/jquery.smartGraph.min.css" />

2.创建画布

<div class="smart-graph smart-graph-example">
  <canvas></canvas>
</div>

3.创建一个基本的笛卡尔坐标系。

$('.smart-graph-example').smartGraph({
  color: '#343a40',
  axises: {
    thickness: null,
    /* inherits from lines.thickness */
    color: null,
    /* inherits from lines.color */
    ticks: {
      step: 1,
      size: 8,
      thickness: null,
      /* inherits from axises.thickness */
      color: null,
      /* inherits from lines.color */
      titles: {
        font: '10px Calibri',
        padding: 10,
        color: null,
        /* inherits from texts.color */
        render: function(value, axisCreatorManager) {
          return axisCreatorManager.getOptimallyRoundedTick(value);
        }
      }
    },
    labels: {
      font: '20px Calibri',
      color: null /* inherits from texts.color */
    },
    x: {
      color: null,
      /* inherits from axises.color */
      label: {
        caption: 'x',
        color: null,
        /* inherits from axises.labels.color */
        padding: 20
      },
      ticks: {
        step: null,
        /* inherits from axises.ticks.step */
        color: null,
        /* inherits from axises.color */
        titles: {
          color: null,
          /* inherits from axises.ticks..titles.color */
          render: null /* inherits from axises.ticks.titles.render */
        }
      }
    },
    y: {
      color: null,
      /* inherits from axises.color */
      label: {
        caption: 'y',
        color: null,
        /* inherits from axises.labels.color */
        padding: 20
      },
      ticks: {
        step: null,
        /* inherits from axises.ticks.step */
        color: null,
        /* inherits from axises.color */
        titles: {
          color: null,
          /* inherits from axises.ticks.titles.color */
          render: null /* inherits from axises.ticks.titles.render */
        }
      }
    }
  },
  data: {
    points: [],
    functions: []
  },
  point: {
    size: 10,
    thickness: 2,
    color: null,
    /* inherits from color */
    hintlines: {
      show: false,
      color: null,
      /* inherits from lines.color */
      thickness: null,
      /* inherits from lines.thickness */
      dash: [2, 2]
    },
    label: {
      font: '13px Calibri',
      color: null,
      /* inherits from texts.color */
      padding: 7,
      render: function(x, y) {
        return '(' + x.roundDigits(2) + ', ' + y.roundDigits(2) + ')';
      }
    }
  },
  'function': {
    step: null,
    /* inherits from axises.x.ticks.step */
    modifier: function() {
      return null;
    },
    connectlines: {
      show: true,
      color: null,
      /* inherits from lines.color */
      thickness: null,
      /* inherits from lines.thickness */
      dash: []
    },
    points: {
      color: null,
      /* inherits from point.color */
      size: null,
      /* inherits from point.size */
      thickness: null,
      /* inherits from point.thickness */
      hintlines: {
        show: null,
        /* inherits from point.hintlines.show */
        color: null,
        /* inherits from point.hintlines.color */
        thickness: null,
        /* inherits from point.hintlines.thickness */
        dash: null /* inherits from point.hintlines.dash */
      },
      labels: {
        font: null,
        /* inherits from point.label.font */
        color: null,
        /* inherits from point.label.color */
        padding: null,
        /* inherits from point.label.padding */
        render: function() {
          return '';
        }
      }
    }
  },
  lines: {
    color: null,
    /* inherits from color */
    thickness: 1
  },
  texts: {
    color: null /* inherits from color */
  },
  move: {
    x: 0,
    y: 0
  },
  responsive: {
    enable: true,
    ratio: 16 / 9
  }
});

4.添加数据

$('.smart-graph-example').smartGraph('addData', {
  points: [{
    x: -2,
    y: -2
  }],
  functions: [{
    relation: x => Math.sin(x),
    step: .1,
    interval: [-4, 4],
    points: {
      size: 0
    }
  }]
})

5.插件允许用户添加自定义事件,使用smartGraph.click

$('.smart-graph-example').attr('title', 'click to draw a point').on('smartGraph.click', function(_e, _settingsManager, x, y) {
  $(this).smartGraph('addData', {
    points: [{
      x: x,
      y: y,
      color: 'red',
      size: 9,
      thickness: 2,
      hintlines: {
        color: 'darkred',
        dash: [3, 4]
      },
      label: {
        color: 'red',
        render: function(x, y) {
          return x.toFixed(2) + ', ' + y.toFixed(2);
        }
      }
    }]
  });
})

6.API方法

// up<a href="https://www.jqueryscript.net/time-clock/">date</a> options
$('.smart-graph-example').smartGraph('setOptions', {
  // options here
});


// add data
$('.smart-graph-example').smartGraph('addData', {
  points: [
    {
      x: 4,
      y: -2
    }
  ]
});

// update data
$('.smart-graph-example').smartGraph('updateData', {
  points: [
    {
      x: 4,
      y: -2
    }
  ]
});

// move the graph
$('.smart-graph-example').smartGraph('moveUp');
$('.smart-graph-example').smartGraph('moveDown');
$('.smart-graph-example').smartGraph('moveLeft');
$('.smart-graph-example').smartGraph('moveRight');

// zoom in/out the graph
$('.smart-graph-example').smartGraph('zoomIn');
$('.smart-graph-example').smartGraph('zoomOut');

案例代码:

$('.smart-graph-example').smartGraph({
  color: '#343a40',
  axises: {
    thickness: null, /* inherits from lines.thickness */
    color: null, /* inherits from lines.color */
    ticks: {
        step: 1,
        size: 8,
        thickness: null, /* inherits from axises.thickness */
        color: null, /* inherits from lines.color */
        titles: {
            font: '10px Calibri',
            padding: 10,
            color: null, /* inherits from texts.color */
            render: function (value, axisCreatorManager) {
                return axisCreatorManager.getOptimallyRoundedTick(value);
            }
        }
    },
    labels: {
        font: '20px Calibri',
        color: null  /* inherits from texts.color */
    },
    x: {
        color: null, /* inherits from axises.color */
        label: {
            caption: 'x',
            color: null,  /* inherits from axises.labels.color */
            padding: 20
        },
        ticks: {
            step: null, /* inherits from axises.ticks.step */
            color: null, /* inherits from axises.color */
            titles: {
                color: null, /* inherits from axises.ticks..titles.color */
                render: null /* inherits from axises.ticks.titles.render */
            }
        }
    },
    y: {
        color: null, /* inherits from axises.color */
        label: {
            caption: 'y',
            color: null, /* inherits from axises.labels.color */
            padding: 20
        },
        ticks: {
            step: null, /* inherits from axises.ticks.step */
            color: null, /* inherits from axises.color */
            titles: {
                color: null, /* inherits from axises.ticks.titles.color */
                render: null /* inherits from axises.ticks.titles.render */
            }
        }
    }
  },
  data: {
    points: [],
    functions: []
  },
  point: {
    size: 10,
    thickness: 2,
    color: null, /* inherits from color */
    hintlines: {
        show: false,
        color: null, /* inherits from lines.color */
        thickness: null, /* inherits from lines.thickness */
        dash: [2, 2]
    },
    label: {
        font: '13px Calibri',
        color: null, /* inherits from texts.color */
        padding: 7,
        render: function (x, y) {
            return '(' + x.roundDigits(2) + ', ' + y.roundDigits(2) + ')';
        }
    }
  },
  'function': {
    step: null, /* inherits from axises.x.ticks.step */
    modifier: function () {
        return null;
    },
    connectlines: {
        show: true,
        color: null, /* inherits from lines.color */
        thickness: null, /* inherits from lines.thickness */
        dash: []
    },
    points: {
        color: null, /* inherits from point.color */
        size: null, /* inherits from point.size */
        thickness: null, /* inherits from point.thickness */
        hintlines: {
            show: null, /* inherits from point.hintlines.show */
            color: null, /* inherits from point.hintlines.color */
            thickness: null, /* inherits from point.hintlines.thickness */
            dash: null /* inherits from point.hintlines.dash */
        },
        labels: {
            font: null, /* inherits from point.label.font */
            color: null, /* inherits from point.label.color */
            padding: null, /* inherits from point.label.padding */
            render: function () {
                return '';
            }
        }
    }
  },
  lines: {
    color: null, /* inherits from color */
    thickness: 1
  },
  texts: {
    color: null /* inherits from color */
  },
  move: {
    x: 0,
    y: 0
  },
  responsive: {
    enable: true,
    ratio: 16 / 9
  }
})
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言