Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

Highcharts現已更新至最新版本7.2.0，新版本添加了新的頂級選項-說明；幾乎所有系列都增加了對多個色軸的支持；增加了高對比度光和高對比度 - 黑暗主題，與背景形成3：1對比度，并修復了一些之前存在的BUG，趕快下載試用吧~

重要推薦：

• 純JavaScript編寫的開源股票圖表控件：Highstock

• 一個基于web項目創建地圖的HTML5/JavaScript地圖組件：Highmaps

點擊下載Highcharts最新試用版

您的第一個圖表

網頁中包含Highcharts之后，您就可以創建第一個圖表了。

我們將從創建一個簡單的條形圖開始。

1、在您的網頁中添加一個div。給它一個id并設置一個特定的寬度和高度，這將是圖表的寬度和高度。

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

2、通過

在網頁中的任何位置添加包含以下代碼的JavaScript標簽來初始化圖表  。＃1中的div在構造函數中引用。

document.addEventListener('DOMContentLoaded', function () {
        var myChart = 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]
            }]
        });
    });

如果要插入股票圖表，則有一個單獨的構造方法，稱為Highcharts.stockChart。在這些圖表中，數據通常以單獨的JavaScript數組提供，可以從單獨的JavaScript文件中獲取，也可以通過對服務器的XHR調用獲取。

var chart1; // globally available
    document.addEventListener('DOMContentLoaded', function() {
        chart1 = Highcharts.stockChart('container', {
            rangeSelector: {
                selected: 1
            },
            series: [{
                name: 'USD to EUR',
                data: usdtoeur // predefined JavaScript array
           }]
       });  
    });

3、現在，您應該在網頁上看到以下圖表：

4、（可選）您可以將全局主題應用于圖表。主題只是通過方法全局應用的一組選項。下載包帶有四個預定義的主題。要從這些文件之一應用主題，請在包含highcharts.js文件之后直接添加主題：

<script type="text/javascript" src="/js/themes/gray.js"></script>

有關Highcharts中的選項或設置如何工作的更多詳細信息，請參見后續教程如何設置選項。

=====================================================

想要購買Highcharts正版授權的朋友可以。

更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼