{"id":30,"date":"2024-11-23T00:33:45","date_gmt":"2024-11-22T16:33:45","guid":{"rendered":"http:\/\/khsci.com\/khQuant\/?p=30"},"modified":"2024-11-23T00:41:55","modified_gmt":"2024-11-22T16:41:55","slug":"30","status":"publish","type":"post","link":"https:\/\/khsci.com\/khQuant\/30\/","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html>\n<head>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.7.0\/chart.min.js\"><\/script>\n    <style>\n        .chart-container {\n            width: 100%;\n            max-width: 600px;\n            margin: 20px auto;\n            padding: 15px;\n            border: 1px solid #eee;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"chart-container\">\n        <canvas id=\"myChart\"><\/canvas>\n    <\/div>\n\n    <script>\n        const ctx = document.getElementById('myChart').getContext('2d');\n        new Chart(ctx, {\n            type: 'line',\n            data: {\n                labels: ['\u4e00\u6708', '\u4e8c\u6708', '\u4e09\u6708', '\u56db\u6708', '\u4e94\u6708', '\u516d\u6708'],\n                datasets: [{\n                    label: '\u6708\u8bbf\u95ee\u91cf',\n                    data: [1200, 1900, 3000, 5000, 4000, 6000],\n                    borderColor: 'rgb(75, 192, 192)',\n                    tension: 0.1\n                }]\n            },\n            options: {\n                responsive: true,\n                plugins: {\n                    title: {\n                        display: true,\n                        text: '\u7f51\u7ad9\u8bbf\u95ee\u7edf\u8ba1'\n                    }\n                }\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.7.0\/chart.min.js\"><\/script>\n    <style>\n        .chart-container {\n            width: 100%;\n            max-width: 800px;\n            margin: 20px auto;\n            padding: 20px;\n            background: white;\n            border-radius: 10px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n        }\n        .controls {\n            margin: 20px 0;\n            text-align: center;\n        }\n        button {\n            padding: 8px 16px;\n            margin: 0 5px;\n            border: none;\n            border-radius: 4px;\n            background: #4CAF50;\n            color: white;\n            cursor: pointer;\n        }\n        button:hover {\n            background: #45a049;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"chart-container\">\n        <div class=\"controls\">\n            <button onclick=\"updateData('\u65e5')\">\u65e5\u6570\u636e<\/button>\n            <button onclick=\"updateData('\u5468')\">\u5468\u6570\u636e<\/button>\n            <button onclick=\"updateData('\u6708')\">\u6708\u6570\u636e<\/button>\n        <\/div>\n        <canvas id=\"interactiveChart\"><\/canvas>\n    <\/div>\n\n    <script>\n        const ctx = document.getElementById('interactiveChart').getContext('2d');\n        let myChart;\n\n        const datasets = {\n            '\u65e5': [12, 19, 15, 25, 22, 30, 28],\n            '\u5468': [85, 120, 140, 160, 155, 170, 190],\n            '\u6708': [350, 420, 480, 520, 490, 550, 600]\n        };\n\n        const labels = {\n            '\u65e5': ['\u5468\u4e00', '\u5468\u4e8c', '\u5468\u4e09', '\u5468\u56db', '\u5468\u4e94', '\u5468\u516d', '\u5468\u65e5'],\n            '\u5468': ['\u7b2c\u4e00\u5468', '\u7b2c\u4e8c\u5468', '\u7b2c\u4e09\u5468', '\u7b2c\u56db\u5468', '\u7b2c\u4e94\u5468', '\u7b2c\u516d\u5468', '\u7b2c\u4e03\u5468'],\n            '\u6708': ['\u4e00\u6708', '\u4e8c\u6708', '\u4e09\u6708', '\u56db\u6708', '\u4e94\u6708', '\u516d\u6708', '\u4e03\u6708']\n        };\n\n        function createChart(type) {\n            if (myChart) {\n                myChart.destroy();\n            }\n\n            myChart = new Chart(ctx, {\n                type: 'line',\n                data: {\n                    labels: labels[type],\n                    datasets: [{\n                        label: `<span class=\"katex math inline\">{type}\u8bbf\u95ee\u91cf\u7edf\u8ba1`,\n                        data: datasets[type],\n                        borderColor: 'rgb(75, 192, 192)',\n                        backgroundColor: 'rgba(75, 192, 192, 0.2)',\n                        fill: true,\n                        tension: 0.3\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    plugins: {\n                        title: {\n                            display: true,\n                            text: `\u7f51\u7ad9<\/span>{type}\u8bbf\u95ee\u91cf\u7edf\u8ba1`\n                        },\n                        tooltip: {\n                            mode: 'index',\n                            intersect: false,\n                        }\n                    },\n                    hover: {\n                        mode: 'nearest',\n                        intersect: true\n                    },\n                    scales: {\n                        y: {\n                            beginAtZero: true\n                        }\n                    }\n                }\n            });\n        }\n\n        function updateData(type) {\n            createChart(type);\n        }\n\n        \/\/ \u521d\u59cb\u5316\u663e\u793a\u65e5\u6570\u636e\n        createChart('\u65e5');\n    <\/script>\n<\/body>\n<\/html>\n\n\n<!DOCTYPE html>\n<html>\n<head>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.7.0\/chart.min.js\"><\/script>\n    <style>\n        .chart-container {\n            width: 100%;\n            max-width: 800px;\n            margin: 20px auto;\n            padding: 20px;\n            background: white;\n            border-radius: 10px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n        }\n        .controls {\n            margin: 20px 0;\n            text-align: center;\n        }\n        button {\n            padding: 8px 16px;\n            margin: 0 5px;\n            border: none;\n            border-radius: 4px;\n            background: #4CAF50;\n            color: white;\n            cursor: pointer;\n        }\n        button:hover {\n            background: #45a049;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"chart-container\">\n        <div class=\"controls\">\n            <button onclick=\"updateData('\u65e5')\">\u65e5\u6570\u636e<\/button>\n            <button onclick=\"updateData('\u5468')\">\u5468\u6570\u636e<\/button>\n            <button onclick=\"updateData('\u6708')\">\u6708\u6570\u636e<\/button>\n        <\/div>\n        <canvas id=\"interactiveChart\"><\/canvas>\n    <\/div>\n\n    <script>\n        const ctx = document.getElementById('interactiveChart').getContext('2d');\n        let myChart;\n\n        const datasets = {\n            '\u65e5': [12, 19, 15, 25, 22, 30, 28],\n            '\u5468': [85, 120, 140, 160, 155, 170, 190],\n            '\u6708': [350, 420, 480, 520, 490, 550, 600]\n        };\n\n        const labels = {\n            '\u65e5': ['\u5468\u4e00', '\u5468\u4e8c', '\u5468\u4e09', '\u5468\u56db', '\u5468\u4e94', '\u5468\u516d', '\u5468\u65e5'],\n            '\u5468': ['\u7b2c\u4e00\u5468', '\u7b2c\u4e8c\u5468', '\u7b2c\u4e09\u5468', '\u7b2c\u56db\u5468', '\u7b2c\u4e94\u5468', '\u7b2c\u516d\u5468', '\u7b2c\u4e03\u5468'],\n            '\u6708': ['\u4e00\u6708', '\u4e8c\u6708', '\u4e09\u6708', '\u56db\u6708', '\u4e94\u6708', '\u516d\u6708', '\u4e03\u6708']\n        };\n\n        function createChart(type) {\n            if (myChart) {\n                myChart.destroy();\n            }\n\n            myChart = new Chart(ctx, {\n                type: 'line',\n                data: {\n                    labels: labels[type],\n                    datasets: [{\n                        label: `<span class=\"katex math inline\">{type}\u8bbf\u95ee\u91cf\u7edf\u8ba1`,\n                        data: datasets[type],\n                        borderColor: 'rgb(75, 192, 192)',\n                        backgroundColor: 'rgba(75, 192, 192, 0.2)',\n                        fill: true,\n                        tension: 0.3\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    plugins: {\n                        title: {\n                            display: true,\n                            text: `\u7f51\u7ad9<\/span>{type}\u8bbf\u95ee\u91cf\u7edf\u8ba1`\n                        },\n                        tooltip: {\n                            mode: 'index',\n                            intersect: false,\n                        }\n                    },\n                    hover: {\n                        mode: 'nearest',\n                        intersect: true\n                    },\n                    scales: {\n                        y: {\n                            beginAtZero: true\n                        }\n                    }\n                }\n            });\n        }\n\n        function updateData(type) {\n            createChart(type);\n        }\n\n        \/\/ \u521d\u59cb\u5316\u663e\u793a\u65e5\u6570\u636e\n        createChart('\u65e5');\n    <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u65e5\u6570\u636e \u5468\u6570\u636e \u6708\u6570\u636e<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"topic":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":3,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/posts\/30\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/tags?post=30"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/khsci.com\/khQuant\/wp-json\/wp\/v2\/topic?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}