Graphing Plugin

Library for Calculator (Graphing)
目前為 2024-08-10 提交的版本，檢視最新版本。
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/503150/1425281/Graphing%20Plugin.js
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name         Graphing Plugin
// @namespace    https://greasyfork.org/en/users/1291009
// @author       BadOrBest
// @license      MIT
// @version      1.2
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// @grant        GM.registerMenuCommand
// @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() {
    'use strict';

    let chartInstance = null;

    // Function to initialize or update the graph
    function updateGraph() {
        const graphData = GM_getValue('graphData', []);
        const ctx = document.getElementById('graphCanvas').getContext('2d');

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

        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'
                    }
                }
            }
        });
    }

    // Function to toggle the graph display
    function toggleGraph() {
        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';
            document.body.appendChild(canvas);
        } else {
            canvas.style.display = canvas.style.display === 'none' ? 'block' : 'none';
            if (canvas.style.display === 'block') {
                updateGraph();
            }
        }
    }

    // Function to clear the graph data
    function clearGraph() {
        GM_setValue('graphData', []);
        const canvas = document.getElementById('graphCanvas');
        if (canvas) {
            canvas.style.display = 'none';
        }
        if (chartInstance) {
            chartInstance.destroy();
            chartInstance = null;
        }
    }

    // Function to process user input and update graph data
    function addGraphData() {
        const expression = prompt('Enter a mathematical expression (e.g., y=x^2):');
        if (expression) {
            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 = GM_getValue('graphData', []);
            newGraphData.push({
                label: `Graph ${newGraphData.length + 1}`,
                points: xValues.map((x, i) => ({ x, y: yValues[i] }))
            });

            GM_setValue('graphData', newGraphData);
            updateGraph();
        }
    }

    // Register menu commands for graphing actions
    GM_registerMenuCommand('Clear Graph', clearGraph);
    GM_registerMenuCommand('Add Graph Data', addGraphData);

    // Listen for custom events to control the graph
    window.addEventListener('graphControlEvent', (event) => {
        const { action } = event.detail;
        if (action === 'toggle') {
            toggleGraph();
        }
    });

    // Initialize or update the graph display if needed
    if (GM_getValue('graphData', []).length > 0) {
        updateGraph();
    }
})();