jQuery Chart图表制作组件Highcharts用法详解

1. Highcharts简介

Highcharts是一个基于JavaScript的图表库，可以用来制作统计图表和动态图表。Highcharts支持各种各样的图表类型以及各种美观的样式。Highcharts是商业软件，尽管使用和开发者文档是免费的，但是如果需要商业使用，需要购买其授权。

2. Highcharts使用步骤

2.1 准备工作

在使用Highcharts之前，我们需要引入以下两个文件：

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

2.2 创建容器

在网页中创建一个DIV作为Highcharts图表容器，如下所示：

<div id="container" style="width:100%; height:400px;"></div>

2.3 配置选项

Highcharts的每个图表都需要一些配置选项，这些选项控制着图表的样式和数据。以下是一个示例：

var options = {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
};

2.4 创建图表

最后，我们可以使用Highcharts的chart()函数来创建图表，如下所示：

$('#container').highcharts(options);

3. Highcharts示例

以下是两个使用Highcharts制作的示例：

3.1 折线图

<div id="container" style="width: 100%; height: 400px;"></div>

<script>
    $(function(){
        Highcharts.chart('container', {
            chart: {
                type: 'line'
            },
            title: {
                text: '月平均温度'
            },
            subtitle: {
                text: '来源: xxxx.com'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '温度 (°C)'
                }
            },
            series: [{
                name: '东京',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: '纽约',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }]
        });
    });
</script>

3.2 饼图

<div id="container" style="width: 100%; height: 400px;"></div>

<script>
    $(function(){
        Highcharts.chart('container', {
            chart: {
                type: 'pie'
            },
            title: {
                text: '2014年浏览器市场份额'
            },
            subtitle: {
                text: '来源: xxxx.com'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name: '浏览器份额',
                colorByPoint: true,
                data: [{
                    name: 'Chrome',
                    y: 61.41,
                    sliced: true,
                    selected: true
                }, {
                    name: 'IE',
                    y: 11.84
                }, {
                    name: 'Firefox',
                    y: 10.85
                }, {
                    name: 'Safari',
                    y: 4.67
                }, {
                    name: 'Opera',
                    y: 4.18
                }, {
                    name: '其他',
                    y: 7.05
                }]
            }]
        });
    });
</script>

4. 总结

本文介绍了Highcharts的基本用法和两个使用Highcharts制作的图表示例。这些示例只是Highcharts的一小部分，Highcharts支持各种各样的图表类型和各种自定义选项，您可以访问Highcharts官方网站以了解更多信息和文档。