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

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

重要推薦：

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

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

點(diǎn)擊下載Highcharts最新試用版

您的第一個圖表

網(wǎng)頁中包含Highcharts之后，您就可以創(chuàng)建第一個圖表了。

我們將從創(chuàng)建一個簡單的條形圖開始。

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

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

2、通過

在網(wǎng)頁中的任何位置添加包含以下代碼的JavaScript標(biāo)簽來初始化圖表  。＃1中的div在構(gòu)造函數(shù)中引用。

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]
            }]
        });
    });

如果要插入股票圖表，則有一個單獨(dú)的構(gòu)造方法，稱為Highcharts.stockChart。在這些圖表中，數(shù)據(jù)通常以單獨(dú)的JavaScript數(shù)組提供，可以從單獨(dú)的JavaScript文件中獲取，也可以通過對服務(wù)器的XHR調(diào)用獲取。

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、現(xiàn)在，您應(yīng)該在網(wǎng)頁上看到以下圖表：

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

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

有關(guān)Highcharts中的選項或設(shè)置如何工作的更多詳細(xì)信息，請參見后續(xù)教程如何設(shè)置選項。

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

想要購買Highcharts正版授權(quán)的朋友可以。

更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼