开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 dedecms 苹果 修真图
当前位置：首页 > 网页特效 > 图表 >  jQuery smartGraph创建可自定义 可扩展数学图

jQuery smartGraph创建可自定义 可扩展数学图

  • 源码大小：77.17KB
  • 所需积分：1积分
  • 源码编号：19JP-3763
  • 浏览次数：971次
  • 最后更新：2023年07月20日
  • 所属栏目：图表
我要下载
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板
[后台模板] 后台数据统计Bootstrap5模板

简介

smartGraph是一个强大的jQuery插件，允许开发人员使用JavaScript和HTML5画布绘制动态、响应、可拖动、矢量形状、无限扩展的图形。

在数学应用程序中很有用，可以生成以有组织的方式表示数据或值的图形和图表，例如函数的图形。

如何使用它:

1.要开始，请在网页上包含jQuery JavaScript库和smartGraph插件的文件。

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

2.创建一个画布元素来保存图形。

  1. <div class="smart-graph smart-graph-example">
  2.   <canvas></canvas>
  3. </div>

3.使用自定义记号和标签创建基本的笛卡尔坐标系。

  1. $('.smart-graph-example').smartGraph({
  2.   color: '#343a40',
  3.   axises: {
  4.     thickness: null,
  5.     /* inherits from lines.thickness */
  6.     color: null,
  7.     /* inherits from lines.color */
  8.     ticks: {
  9.       step: 1,
  10.       size: 8,
  11.       thickness: null,
  12.       /* inherits from axises.thickness */
  13.       color: null,
  14.       /* inherits from lines.color */
  15.       titles: {
  16.         font: '10px Calibri',
  17.         padding: 10,
  18.         color: null,
  19.         /* inherits from texts.color */
  20.         render: function(value, axisCreatorManager) {
  21.           return axisCreatorManager.getOptimallyRoundedTick(value);
  22.         }
  23.       }
  24.     },
  25.     labels: {
  26.       font: '20px Calibri',
  27.       color: null /* inherits from texts.color */
  28.     },
  29.     x: {
  30.       color: null,
  31.       /* inherits from axises.color */
  32.       label: {
  33.         caption: 'x',
  34.         color: null,
  35.         /* inherits from axises.labels.color */
  36.         padding: 20
  37.       },
  38.       ticks: {
  39.         step: null,
  40.         /* inherits from axises.ticks.step */
  41.         color: null,
  42.         /* inherits from axises.color */
  43.         titles: {
  44.           color: null,
  45.           /* inherits from axises.ticks..titles.color */
  46.           render: null /* inherits from axises.ticks.titles.render */
  47.         }
  48.       }
  49.     },
  50.     y: {
  51.       color: null,
  52.       /* inherits from axises.color */
  53.       label: {
  54.         caption: 'y',
  55.         color: null,
  56.         /* inherits from axises.labels.color */
  57.         padding: 20
  58.       },
  59.       ticks: {
  60.         step: null,
  61.         /* inherits from axises.ticks.step */
  62.         color: null,
  63.         /* inherits from axises.color */
  64.         titles: {
  65.           color: null,
  66.           /* inherits from axises.ticks.titles.color */
  67.           render: null /* inherits from axises.ticks.titles.render */
  68.         }
  69.       }
  70.     }
  71.   },
  72.   data: {
  73.     points: [],
  74.     functions: []
  75.   },
  76.   point: {
  77.     size: 10,
  78.     thickness: 2,
  79.     color: null,
  80.     /* inherits from color */
  81.     hintlines: {
  82.       show: false,
  83.       color: null,
  84.       /* inherits from lines.color */
  85.       thickness: null,
  86.       /* inherits from lines.thickness */
  87.       dash: [2, 2]
  88.     },
  89.     label: {
  90.       font: '13px Calibri',
  91.       color: null,
  92.       /* inherits from texts.color */
  93.       padding: 7,
  94.       render: function(x, y) {
  95.         return '(' + x.roundDigits(2) + ', ' + y.roundDigits(2) + ')';
  96.       }
  97.     }
  98.   },
  99.   'function': {
  100.     step: null,
  101.     /* inherits from axises.x.ticks.step */
  102.     modifier: function() {
  103.       return null;
  104.     },
  105.     connectlines: {
  106.       show: true,
  107.       color: null,
  108.       /* inherits from lines.color */
  109.       thickness: null,
  110.       /* inherits from lines.thickness */
  111.       dash: []
  112.     },
  113.     points: {
  114.       color: null,
  115.       /* inherits from point.color */
  116.       size: null,
  117.       /* inherits from point.size */
  118.       thickness: null,
  119.       /* inherits from point.thickness */
  120.       hintlines: {
  121.         show: null,
  122.         /* inherits from point.hintlines.show */
  123.         color: null,
  124.         /* inherits from point.hintlines.color */
  125.         thickness: null,
  126.         /* inherits from point.hintlines.thickness */
  127.         dash: null /* inherits from point.hintlines.dash */
  128.       },
  129.       labels: {
  130.         font: null,
  131.         /* inherits from point.label.font */
  132.         color: null,
  133.         /* inherits from point.label.color */
  134.         padding: null,
  135.         /* inherits from point.label.padding */
  136.         render: function() {
  137.           return '';
  138.         }
  139.       }
  140.     }
  141.   },
  142.   lines: {
  143.     color: null,
  144.     /* inherits from color */
  145.     thickness: 1
  146.   },
  147.   texts: {
  148.     color: null /* inherits from color */
  149.   },
  150.   move: {
  151.     x: 0,
  152.     y: 0
  153.   },
  154.   responsive: {
  155.     enable: true,
  156.     ratio: 16 / 9
  157.   }
  158. });

4.将数据（点和函数）添加到笛卡尔坐标系中。

  1. $('.smart-graph-example').smartGraph('addData', {
  2.   points: [{
  3.     x: -2,
  4.     y: -2
  5.   }],
  6.   functions: [{
  7.     relation: x => Math.sin(x),
  8.     step: .1,
  9.     interval: [-4, 4],
  10.     points: {
  11.       size: 0
  12.     }
  13.   }]
  14. })

5.该插件还允许用户使用智能图形.click事件

  1. $('.smart-graph-example').attr('title', 'click to draw a point').on('smartGraph.click', function(_e, _settingsManager, x, y) {
  2.   $(this).smartGraph('addData', {
  3.     points: [{
  4.       x: x,
  5.       y: y,
  6.       color: 'red',
  7.       size: 9,
  8.       thickness: 2,
  9.       hintlines: {
  10.         color: 'darkred',
  11.         dash: [3, 4]
  12.       },
  13.       label: {
  14.         color: 'red',
  15.         render: function(x, y) {
  16.           return x.toFixed(2) + ', ' + y.toFixed(2);
  17.         }
  18.       }
  19.     }]
  20.   });
  21. })

6.用于自定义图形的所有默认选项。

  1. $('.smart-graph-example').smartGraph({
  2.   color: '#343a40',
  3.   axises: {
  4.     thickness: null, /* inherits from lines.thickness */
  5.     color: null, /* inherits from lines.color */
  6.     ticks: {
  7.         step: 1,
  8.         size: 8,
  9.         thickness: null, /* inherits from axises.thickness */
  10.         color: null, /* inherits from lines.color */
  11.         titles: {
  12.             font: '10px Calibri',
  13.             padding: 10,
  14.             color: null, /* inherits from texts.color */
  15.             render: function (value, axisCreatorManager) {
  16.                 return axisCreatorManager.getOptimallyRoundedTick(value);
  17.             }
  18.         }
  19.     },
  20.     labels: {
  21.         font: '20px Calibri',
  22.         color: null  /* inherits from texts.color */
  23.     },
  24.     x: {
  25.         color: null, /* inherits from axises.color */
  26.         label: {
  27.             caption: 'x',
  28.             color: null,  /* inherits from axises.labels.color */
  29.             padding: 20
  30.         },
  31.         ticks: {
  32.             step: null, /* inherits from axises.ticks.step */
  33.             color: null, /* inherits from axises.color */
  34.             titles: {
  35.                 color: null, /* inherits from axises.ticks..titles.color */
  36.                 render: null /* inherits from axises.ticks.titles.render */
  37.             }
  38.         }
  39.     },
  40.     y: {
  41.         color: null, /* inherits from axises.color */
  42.         label: {
  43.             caption: 'y',
  44.             color: null, /* inherits from axises.labels.color */
  45.             padding: 20
  46.         },
  47.         ticks: {
  48.             step: null, /* inherits from axises.ticks.step */
  49.             color: null, /* inherits from axises.color */
  50.             titles: {
  51.                 color: null, /* inherits from axises.ticks.titles.color */
  52.                 render: null /* inherits from axises.ticks.titles.render */
  53.             }
  54.         }
  55.     }
  56.   },
  57.   data: {
  58.     points: [],
  59.     functions: []
  60.   },
  61.   point: {
  62.     size: 10,
  63.     thickness: 2,
  64.     color: null, /* inherits from color */
  65.     hintlines: {
  66.         show: false,
  67.         color: null, /* inherits from lines.color */
  68.         thickness: null, /* inherits from lines.thickness */
  69.         dash: [2, 2]
  70.     },
  71.     label: {
  72.         font: '13px Calibri',
  73.         color: null, /* inherits from texts.color */
  74.         padding: 7,
  75.         render: function (x, y) {
  76.             return '(' + x.roundDigits(2) + ', ' + y.roundDigits(2) + ')';
  77.         }
  78.     }
  79.   },
  80.   'function': {
  81.     step: null, /* inherits from axises.x.ticks.step */
  82.     modifier: function () {
  83.         return null;
  84.     },
  85.     connectlines: {
  86.         show: true,
  87.         color: null, /* inherits from lines.color */
  88.         thickness: null, /* inherits from lines.thickness */
  89.         dash: []
  90.     },
  91.     points: {
  92.         color: null, /* inherits from point.color */
  93.         size: null, /* inherits from point.size */
  94.         thickness: null, /* inherits from point.thickness */
  95.         hintlines: {
  96.             show: null, /* inherits from point.hintlines.show */
  97.             color: null, /* inherits from point.hintlines.color */
  98.             thickness: null, /* inherits from point.hintlines.thickness */
  99.             dash: null /* inherits from point.hintlines.dash */
  100.         },
  101.         labels: {
  102.             font: null, /* inherits from point.label.font */
  103.             color: null, /* inherits from point.label.color */
  104.             padding: null, /* inherits from point.label.padding */
  105.             render: function () {
  106.                 return '';
  107.             }
  108.         }
  109.     }
  110.   },
  111.   lines: {
  112.     color: null, /* inherits from color */
  113.     thickness: 1
  114.   },
  115.   texts: {
  116.     color: null /* inherits from color */
  117.   },
  118.   move: {
  119.     x: 0,
  120.     y: 0
  121.   },
  122.   responsive: {
  123.     enable: true,
  124.     ratio: 16 / 9
  125.   }
  126. })

7.API方法。

  1. // update options
  2. $('.smart-graph-example').smartGraph('setOptions', {
  3.   // options here
  4. });
  5.  
  6. // add data
  7. $('.smart-graph-example').smartGraph('addData', {
  8.   points: [
  9.     {
  10.       x: 4,
  11.       y: -2
  12.     }
  13.   ]
  14. });
  15.  
  16. // update data
  17. $('.smart-graph-example').smartGraph('updateData', {
  18.   points: [
  19.     {
  20.       x: 4,
  21.       y: -2
  22.     }
  23.   ]
  24. });
  25.  
  26. // move the graph
  27. $('.smart-graph-example').smartGraph('moveUp');
  28. $('.smart-graph-example').smartGraph('moveDown');
  29. $('.smart-graph-example').smartGraph('moveLeft');
  30. $('.smart-graph-example').smartGraph('moveRight');
  31.  
  32. // zoom in/out the graph
  33. $('.smart-graph-example').smartGraph('zoomIn');
  34. $('.smart-graph-example').smartGraph('zoomOut');

更新日志：

2022-01-03

  • v1.3.0：重构、点击事件参数、函数呈现优化、异常处理

2021-01-28

  • 版本2.0

2021-01-04

  • IE错误修复，鼠标移动跨浏览器支持，手指触摸移动支持

预览截图

相关热词： jQuerysmartGraph创建自定义可扩展数学
上一篇：由IBM提供 全功能甘特图组件
下一篇：jQuery中 线性进度指示器 rProgressbar

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1