5个最顶级jQuery图表类库插件【jquery插件库】

本篇文章将介绍5个最顶级的jQuery图表类库插件，这些插件可以方便地在你的网站中生成各种类型的图表。这些插件均为开源免费，且提供了丰富的配置选项，可以通过简单的设置实现不同的图表效果。下面将分别对这5个插件进行详细讲解。

1. Highcharts

Highcharts是一款非常流行的JavaScript图表库，它可以轻松实现交互式图表，并且提供了许多内置的功能，例如数据可视化、动态数据更新、导出图表等等。Highcharts同时也支持移动设备，可以在不同的屏幕尺寸下显示良好。

下面是一个简单的Highcharts示例：

// 初始化Highcharts
Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

这个示例展示了一个柱状图，其中包含了水果消费情况的数据，并且可以选择不同的风格，比如生成线性、饼图、散点图等。

2. Chart.js

Chart.js是另一个非常受欢迎的图表库，可以创建各种类型的图表，包括柱状图、饼图、折线图等。

下面是一个简单的Chart.js示例：

// 初始化Chart.js
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

上述代码创建了一个柱状图，并在其上添加了一些样式，例如颜色、边框等。

3. Morris.js

Morris.js是一款基于jQuery和Raphael.js的简单的图表库，可以创建优雅的折线图、区域图以及柱状图。

下面是一个简单的Morris.js示例：

// 初始化Morris.js
new Morris.Area({
    // ID of the element in which to draw the chart.
    element: 'myfirstchart',
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [
        { year: '2008', value: 20 },
        { year: '2009', value: 10 },
        { year: '2010', value: 50 },
        { year: '2011', value: 60 },
        { year: '2012', value: 30 }
    ],
    // The name of the data record attribute that contains x-values.
    xkey: 'year',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['value'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Value']
});

上述代码创建了一个区域图，并在其上展示了历史数据，包括每个年份的数值，并且可以在鼠标悬浮时展示数值详情。

4. FusionCharts

FusionCharts是一款用于数据可视化的JavaScript图表类库，可以通过简单的设置创建许多类型的图表，这些图表包括折线图、柱状图、饼图等。FusionCharts还支持大数据可视化，并且可以与各种数据来源（例如MySQL、JSON等）整合使用。

下面是一个简单的FusionCharts示例：

// 初始化FusionCharts
FusionCharts.ready(function() {
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Monthly revenue",
                "subCaption": "Last year",
                "xAxisName": "Month",
                "yAxisName": "Revenue (In USD)",
                "theme": "fusion"
            },
            "data": [{
                    "label": "Jan",
                    "value": "420000"
                },
                {
                    "label": "Feb",
                    "value": "810000"
                },
                {
                    "label": "Mar",
                    "value": "720000"
                },
                {
                    "label": "Apr",
                    "value": "550000"
                },
                {
                    "label": "May",
                    "value": "910000"
                },
                {
                    "label": "Jun",
                    "value": "510000"
                },
                {
                    "label": "Jul",
                    "value": "680000"
                },
                {
                    "label": "Aug",
                    "value": "620000"
                },
                {
                    "label": "Sep",
                    "value": "610000"
                },
                {
                    "label": "Oct",
                    "value": "490000"
                },
                {
                    "label": "Nov",
                    "value": "900000"
                },
                {
                    "label": "Dec",
                    "value": "730000"
                }
            ]
        }
    }).render();
});

上述代码创建了一个柱状图，并在其上展示了去年每月收入的情况，可以通过颜色、标签、字体等功能来美化图表样式。

5. C3.js

C3.js是另一种基于D3.js构建的可视化库，可以轻松创建交互式图表和图形。

下面是一个简单的C3.js示例：

// 初始化C3.js
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

上述代码创建了一个折线图，其中包含了两条数据列，并提供了一些自定义配置选项，例如图表颜色、坐标轴等。

以上是5个顶级的jQuery图表类库插件的详细讲解，它们都提供了方便丰富的配置选项，可以通过简单的设置实现各种图表效果。如果你需要在网站中添加图表，这些插件都是非常好用的工具，可以满足你的需求。