css+jquery的互动走势图

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。它主要用于定义网页的外观和布局。

jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。

类型

互动走势图：
- 折线图：显示数据随时间变化的趋势。
- 柱状图：比较不同类别的数据。
- 饼图：显示各部分占整体的比例。
- 散点图：显示两个变量之间的关系。

应用场景

互动走势图广泛应用于数据分析、金融分析、销售统计、用户行为分析等领域。例如，电商网站可以使用互动走势图展示商品的销售趋势，金融网站可以使用走势图展示股票价格的变化。

示例代码

以下是一个简单的CSS+jQuery互动折线图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互动走势图</title>
    <style>
        .chart {
            width: 80%;
            margin: 0 auto;
            position: relative;
            height: 400px;
            border: 1px solid #ccc;
        }
        .data-point {
            position: absolute;
            background-color: blue;
            width: 4px;
            height: 4px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="chart" id="chart"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            const data = [
                { x: 50, y: 100 },
                { x: 150, y: 150 },
                { x: 250, y: 75 },
                { x: 350, y: 200 },
                { x: 450, y: 125 }
            ];

            const chart = $('#chart');
            const width = chart.width();
            const height = chart.height();
            const max = Math.max(...data.map(d => d.y));
            const min = Math.min(...data.map(d => d.y));

            data.forEach(point => {
                const x = (point.x / 500) * width;
                const y = height - ((point.y / max) * height);
                const dataPoint = $('<div class="data-point"></div>');
                dataPoint.css({
                    left: x,
                    top: y
                });
                chart.append(dataPoint);
            });

            chart.on('mousemove', function(event) {
                const mouseX = event.offsetX;
                const closestPoint = data.reduce((prev, curr) => {
                    return (Math.abs(curr.x - (mouseX / width) * 500) < Math.abs(prev.x - (mouseX / width) * 500) ? curr : prev);
                });

                console.log(`X: ${closestPoint.x}, Y: ${closestPoint.y}`);
            });
        });
    </script>
</body>
</html>