【掌握Highcharts，轻松实现数据可视化】精选实例代码带你入门！

Highcharts 是一个功能富强的 JavaScript 图表库，它容许用户创建各品种型的图表，如柱状图、折线图、饼图等，以便于数据可视化。经由过程 Highcharts，你可能轻松地将复杂的数据转化为直不雅、易懂得的图表。本文将带你从入门到粗通，经由过程精选实例代码，让你疾速控制 Highcharts。

第一章：Highcharts 简介

1.1 Highcharts 的特点

丰富的图表范例：供给多种图表范例，如柱状图、折线图、饼图、散点图等。
高度定制：容许用户自定义图表的各个方面，包含色彩、字体、线条等。
呼应式计划：支撑多种设备跟屏幕尺寸，供给精良的用户休会。
跨平台：在 PC、平板电脑跟手机等设备上都能精良运转。

1.2 Highcharts 的安装

起首，你须要从 Highcharts 官网下载库文件，并将其包含在你的 HTML 文件中。

<script src="https://code.highcharts.com/highcharts.js"></script>

第二章：基本实例

2.1 简单柱状图

以下是一个简单的柱状图实例：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 简单柱状图</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; min-width: 310px"></div>
    <script type="text/javascript">
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: '柱状图示例'
            },
            xAxis: {
                categories: ['苹果', '喷鼻蕉', '橙子']
            },
            yAxis: {
                title: {
                    text: '数量'
                }
            },
            series: [{
                name: '生果',
                data: [1, 2, 3]
            }]
        });
    </script>
</body>
</html>

2.2 折线图

以下是一个折线图实例：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 折线图</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; min-width: 310px"></div>
    <script type="text/javascript">
        Highcharts.chart('container', {
            chart: {
                type: 'line'
            },
            title: {
                text: '折线图示例'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '蒲月']
            },
            yAxis: {
                title: {
                    text: '温度'
                }
            },
            series: [{
                name: '温度',
                data: [7.0, 6.9, 9.5, 14.5, 18.2]
            }]
        });
    </script>
</body>
</html>

第三章：高等实例

3.1 3D 饼图

以下是一个 3D 饼图实例：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 3D 饼图</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/highcharts-3d.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; min-width: 310px"></div>
    <script type="text/javascript">
        Highcharts.chart('container', {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: '3D 饼图示例'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45
                }
            },
            series: [{
                name: '生果',
                data: [
                    {name: '苹果', y: 29.9},
                    {name: '喷鼻蕉', y: 71.5},
                    {name: '橙子', y: 100},
                    {name: '葡萄', y: 49.9},
                    {name: '樱桃', y: 38.2},
                    {name: '梨', y: 17.0}
                ]
            }]
        });
    </script>
</body>
</html>

3.2 静态更新数据

以下是一个静态更新数据的实例：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts 静态更新数据</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; min-width: 310px"></div>
    <script type="text/javascript">
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'line',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 130
            },
            title: {
                text: '静态更新数据'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: '温度'
                }
            },
            series: [{
                name: '温度',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i += 1) {
                        time += 3600000; // add one hour
                        data.push([
                            time,
                            Math.round(Math.random() * 100)
                        ]);
                    }
                    return data;
                }())
            }],
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        this.y + '°C';
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            }
        });

        // add random data
        setInterval(function () {
            var x = (new Date()).getTime();
            var y = Math.round(Math.random() * 100);
            var series = chart.series[0];
            var point = series.data[series.data.length - 1];
            point.update(x, y);
        }, 1000);
    </script>
</body>
</html>

第四章：总结

经由过程本文的介绍，信赖你曾经对 Highcharts 有了必定的懂得。Highcharts 是一个功能富强的图表库，可能帮助你轻松实现数据可视化。经由过程以上实例，你可能进修到怎样创建各品种型的图表，以及怎样停止高等定制。盼望本文能帮助你疾速入门，并在现实项目中应用 Highcharts。