Highchart详细介绍

一、概述

Highchart是一种基于JavaScript的图表库，它提供了一个非常简单、直观的方式来创建图表和可视化数据。Highchart 相信数据在我们生活中天然的影响力，所以他创建了这一个方便使用的图表库。

Highchart的功能非常丰富，包含线性、面积、条形、柱形、散点&气泡、圆饼&环形、堆积、组合图、3D图、地图等多种类型。同时，它也提供了丰富的API和事件，这意味着可以使用JavaScript代码去扩展和定制Highchart图表，实现互动，快速响应，同时支持导出Pdf，png，jpeg和svg 图像格式。

二、背景

Highchart是由挪威的基于Web的制图软件供应商 Highsoft 开发的，它弱化了复杂的图表生成代码，使得用户可以轻易地创建出吸引人的交互式图表。

Highsoft 创始人 Torstein Hønsi 是一个数学博士，和一群其他的数学家、统计学家、机器学习专家和 Web 开发人员共同创办了 Highsoft 。这些人都热衷于将复杂的数学和统计学分析框架用更高效和易于使用的方式呈现出来，并探索算法应用于各种不同的市场领域。

三、特点

1、多种类型的图表

Highchart支持多种类型的图表，包括线性、面积、条形、柱形、散点&气泡、圆饼&环形、堆积、组合图、3D图、地图等。每种图表都可以快速响应和互动，并且提供了丰富的自定义选项，方便用户针对不同的数据格式和需求进行定制。

var chart = 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、多样化的自定义选项

Highchart提供了丰富的自定义选项，包括多级X轴&Y轴、标签、提示、图例、颜色细节、渐变、过渡、绘图区域和图表样式等，方便用户针对不同的数据格式和需求进行定制。

var chart = Highcharts.chart('container', {
    chart: {
        type: 'area',
        backgroundColor: '#ffe'
    },
    title: {
        text: 'Area chart'
    },
    subtitle: {
        text: 'Using custom background color and margin'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Agu', 'Sep', 'Oct', 'Nov', 'Dec'],
        margin: 10
    },
    yAxis: {
        title: {
            text: 'Landslide risk index'
        },
        min: 0
    },
    tooltip: {
        split: true,
        valueSuffix: '%'
    },
    plotOptions: {
        area: {
            marker: {
                enabled: false
            },
            lineWidth: 2,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            threshold: null
        }
    },
    series: [{
        name: 'Risk index',
        data: [70, 69, 70, 71, 68, 68, 72, 75, 73, 72, 69, 66]
    }]
});

3、丰富的API和事件

Highchart的API和事件非常丰富，允许您使用JavaScript代码去扩展和定制Highchart图表，实现互动，快速响应以及导出Pdf，png，jpeg和svg图像格式等。您可以自定义合适的代码，实现个性化的数据可视化需求。

// 通过API动态添加数据
var data = [1,2,3,4,5,6,7];
QMYChart.addSeries({data:data});
// 通过事件实现响应操作
chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            click: function(event) {
                console.log('The chart was clicked. Coordinates: ', event.chartX, event.chartY, event);
            }
        }
    },
    title: {
        text: 'Mouse events demo'
    },
    subtitle: {
        text: 'Event information in the console'
    },
    series: [{
        data: [1, 3, 2, 4]
    }]
});

四、优势

1、易于使用和上手

Highchart的API简洁明了、易于理解，用户可以快速掌握，轻松地创建复杂的图表。如果您具有HTML、CSS和JavaScript基础，甚至没有图表的经验，也可以在不到半小时内学习Highchart的操作。

2、响应迅速，高性能

Highchart的渲染速度非常快，加载的图表响应迅速，用户可以快速对大量的数据进行分析和可视化操作。

3、可以自定义样式

Highchart提供了丰富的样式选项，用户可以通过CSS或JavaScript对图表的各种元素进行自定义，如背景色、边框、字体颜色、标签、图例、轴等元素的样式可以自由设定。

4、兼容性强

Highchart支持主流浏览器，包括Google Chrome、Firefox、Safari、Opera和IE6之后的所有版本。如果你的项目要兼容IE6或IE7，我们可以提供Flash的图表支持。

五、总结

Highchart是一种非常强大的JavaScript图表库，它提供了简单、直观的方式来创建图表和可视化数据，支持多种类型的图表，提供了丰富的API和事件，允许用户使用JavaScript代码扩展和定制Highchart图表。Highchart最大的优势在于其容易上手，响应快，自定义选项丰富，兼容性强，所以成为了Web界面开发必须的开源工具之一。