Graphing Plugin

A library for adding and managing graphs on any webpage.

当前为 2024-08-10 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/503150/1425743/Graphing%20Plugin.js

  1. // ==UserScript==
  2. // @name Graphing Plugin
  3. // @namespace https://gf.qytechs.cn/en/users/1291009
  4. // @author BadOrBest
  5. // @license MIT
  6. // @version 1.3
  7. // @description A library for adding and managing graphs on any webpage.
  8. // @grant none
  9. // @require https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.0.3/math.min.js
  10. // @require https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js
  11. // ==/UserScript==
  12.  
  13. (function(global) {
  14. 'use strict';
  15.  
  16. // Expose the library to the global scope
  17. global.GraphingLibrary = {
  18. chartInstance: null,
  19.  
  20. // Initialize or update the graph
  21. updateGraph: function() {
  22. const graphData = JSON.parse(localStorage.getItem('graphData') || '[]');
  23. let canvas = document.getElementById('graphCanvas');
  24. if (!canvas) {
  25. console.error('Graph canvas not found.');
  26. return;
  27. }
  28. const ctx = canvas.getContext('2d');
  29.  
  30. if (this.chartInstance) {
  31. this.chartInstance.destroy();
  32. }
  33.  
  34. this.chartInstance = new Chart(ctx, {
  35. type: 'line',
  36. data: {
  37. datasets: graphData.map(data => ({
  38. label: data.label,
  39. data: data.points,
  40. borderColor: data.color || 'blue',
  41. borderWidth: 1,
  42. fill: false
  43. }))
  44. },
  45. options: {
  46. scales: {
  47. x: {
  48. type: 'linear',
  49. position: 'bottom'
  50. }
  51. }
  52. }
  53. });
  54. },
  55.  
  56. // Toggle the graph display
  57. toggleGraph: function() {
  58. let canvas = document.getElementById('graphCanvas');
  59. if (!canvas) {
  60. canvas = document.createElement('canvas');
  61. canvas.id = 'graphCanvas';
  62. canvas.style.position = 'fixed';
  63. canvas.style.bottom = '0';
  64. canvas.style.right = '0';
  65. canvas.style.zIndex = '9999';
  66. canvas.style.width = '600px'; // Set canvas width
  67. canvas.style.height = '400px'; // Set canvas height
  68. document.body.appendChild(canvas);
  69. }
  70. canvas.style.display = canvas.style.display === 'none' ? 'block' : 'none';
  71. if (canvas.style.display === 'block') {
  72. this.updateGraph();
  73. }
  74. },
  75.  
  76. // Clear the graph data
  77. clearGraph: function() {
  78. localStorage.setItem('graphData', JSON.stringify([]));
  79. const canvas = document.getElementById('graphCanvas');
  80. if (canvas) {
  81. canvas.style.display = 'none';
  82. }
  83. if (this.chartInstance) {
  84. this.chartInstance.destroy();
  85. this.chartInstance = null;
  86. }
  87. },
  88.  
  89. // Add graph data
  90. addGraphData: function(expression) {
  91. if (expression) {
  92. try {
  93. const xValues = Array.from({ length: 100 }, (_, i) => i - 50); // X values from -50 to 50
  94. const yValues = xValues.map(x => math.evaluate(expression.replace(/x/g, x))); // Evaluate expression
  95.  
  96. const newGraphData = JSON.parse(localStorage.getItem('graphData') || '[]');
  97. newGraphData.push({
  98. label: `Graph ${newGraphData.length + 1}`,
  99. points: xValues.map((x, i) => ({ x, y: yValues[i] }))
  100. });
  101.  
  102. localStorage.setItem('graphData', JSON.stringify(newGraphData));
  103. this.updateGraph();
  104. } catch (error) {
  105. alert('Error evaluating expression: ' + error.message);
  106. }
  107. }
  108. }
  109. };
  110.  
  111. // Initialize or update the graph display if needed
  112. if (JSON.parse(localStorage.getItem('graphData') || '[]').length > 0) {
  113. GraphingLibrary.toggleGraph();
  114. }
  115.  
  116. })(window);

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址