jquery折线图

jQuery 折线图实现方法

使用 jQuery 结合图表库可以快速实现折线图功能。以下是几种常见方案：

使用 Chart.js

Chart.js 是一个轻量级且功能强大的图表库，支持折线图等多种图表类型。

引入依赖：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建折线图：

$(document).ready(function(){
    var ctx = $('#myChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May'],
            datasets: [{
                label: 'Sales',
                data: [12, 19, 3, 5, 2],
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        }
    });
});

使用 Highcharts

Highcharts 是另一个流行的图表库，提供丰富的交互功能。

引入依赖：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建折线图：

$(document).ready(function(){
    $('#container').highcharts({
        title: {
            text: 'Monthly Sales'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        },
        series: [{
            name: 'Sales',
            data: [29.9, 71.5, 106.4, 129.2, 144.0]
        }]
    });
});

使用 Flot

Flot 是一个 jQuery 专用的绘图库，适合简单的图表需求。

引入依赖：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

创建折线图：

$(function(){
    var data = [[0, 0], [1, 10], [2, 20], [3, 30], [4, 40]];
    $.plot("#placeholder", [ data ], {
        series: {
            lines: { show: true },
            points: { show: true }
        }
    });
});

自定义 SVG 折线图

对于简单需求，可以直接使用 jQuery 操作 SVG 绘制折线图：

$(document).ready(function(){
    var data = [10, 30, 50, 20, 40];
    var svg = $('<svg width="500" height="300"></svg>').appendTo('#chart-container');

    var path = 'M0,' + (300 - data[0]);
    $.each(data, function(i, val){
        path += ' L' + (i * 100) + ',' + (300 - val);
    });

    $('<path>').attr({
        'd': path,
        'stroke': 'blue',
        'fill': 'none',
        'stroke-width': 2
    }).appendTo(svg);
});

每种方案各有优缺点：Chart.js 简单易用，Highcharts 功能丰富，Flot 轻量但功能较少，自定义 SVG 灵活性最高但开发成本较大。根据项目需求选择合适的方案。