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
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Graphing Plugin
// @namespace    https://greasyfork.org/en/users/1291009
// @author       BadOrBest
// @license      MIT
// @version      1.3
// @description  A library for adding and managing graphs on any webpage.
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.0.3/math.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js
// ==/UserScript==

(function(global) {
    'use strict';

    // Expose the library to the global scope
    global.GraphingLibrary = {
        chartInstance: null,

        // Initialize or update the graph
        updateGraph: function() {
            const graphData = JSON.parse(localStorage.getItem('graphData') || '[]');
            let canvas = document.getElementById('graphCanvas');
            if (!canvas) {
                console.error('Graph canvas not found.');
                return;
            }
            const ctx = canvas.getContext('2d');

            if (this.chartInstance) {
                this.chartInstance.destroy();
            }

            this.chartInstance = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: graphData.map(data => ({
                        label: data.label,
                        data: data.points,
                        borderColor: data.color || 'blue',
                        borderWidth: 1,
                        fill: false
                    }))
                },
                options: {
                    scales: {
                        x: {
                            type: 'linear',
                            position: 'bottom'
                        }
                    }
                }
            });
        },

        // Toggle the graph display
        toggleGraph: function() {
            let canvas = document.getElementById('graphCanvas');
            if (!canvas) {
                canvas = document.createElement('canvas');
                canvas.id = 'graphCanvas';
                canvas.style.position = 'fixed';
                canvas.style.bottom = '0';
                canvas.style.right = '0';
                canvas.style.zIndex = '9999';
                canvas.style.width = '600px'; // Set canvas width
                canvas.style.height = '400px'; // Set canvas height
                document.body.appendChild(canvas);
            }
            canvas.style.display = canvas.style.display === 'none' ? 'block' : 'none';
            if (canvas.style.display === 'block') {
                this.updateGraph();
            }
        },

        // Clear the graph data
        clearGraph: function() {
            localStorage.setItem('graphData', JSON.stringify([]));
            const canvas = document.getElementById('graphCanvas');
            if (canvas) {
                canvas.style.display = 'none';
            }
            if (this.chartInstance) {
                this.chartInstance.destroy();
                this.chartInstance = null;
            }
        },

        // Add graph data
        addGraphData: function(expression) {
            if (expression) {
                try {
                    const xValues = Array.from({ length: 100 }, (_, i) => i - 50); // X values from -50 to 50
                    const yValues = xValues.map(x => math.evaluate(expression.replace(/x/g, x))); // Evaluate expression

                    const newGraphData = JSON.parse(localStorage.getItem('graphData') || '[]');
                    newGraphData.push({
                        label: `Graph ${newGraphData.length + 1}`,
                        points: xValues.map((x, i) => ({ x, y: yValues[i] }))
                    });

                    localStorage.setItem('graphData', JSON.stringify(newGraphData));
                    this.updateGraph();
                } catch (error) {
                    alert('Error evaluating expression: ' + error.message);
                }
            }
        }
    };

    // Initialize or update the graph display if needed
    if (JSON.parse(localStorage.getItem('graphData') || '[]').length > 0) {
        GraphingLibrary.toggleGraph();
    }

})(window);