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界面開發必須的開源工具之一。