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

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

重要推薦：

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

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

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

如何設(shè)置選項(xiàng)

高圖表使用JavaScript對(duì)象結(jié)構(gòu)定義圖表的選項(xiàng)或設(shè)置。本文介紹了options對(duì)象如何工作以及如何使用它。

• 選項(xiàng)對(duì)象

• 全局選項(xiàng)

選項(xiàng)對(duì)象

使用圖表的構(gòu)造函數(shù)Highcharts.Chart初始化圖表時(shí)，options對(duì)象是您傳遞的第一個(gè)參數(shù)。

在下面的示例中，標(biāo)記為紅色的代碼表示options對(duì)象：

$(function() {
    var chart1 = Highcharts.chart({
        chart: {
            renderTo: 'container',
            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，了解選項(xiàng)對(duì)象的工作方式以及如何以編程方式對(duì)其進(jìn)行更改非常重要。這些是關(guān)于JavaScript對(duì)象的一些關(guān)鍵概念：

• 示例中的Highcharts選項(xiàng)定義為對(duì)象文字。通過以這種方式指出配置，我們可以擁有一個(gè)干凈，易于閱讀且占用空間少的配置對(duì)象。具有C類型語言背景的開發(fā)人員可能更熟悉以下復(fù)雜的代碼：

// Bad code: var options = new Object();
options.chart = new Object(); options.chart.renderTo = 'container'; options.chart.type = 'bar';
options.series = new Array(); options.series[0] = new Object(); options.series[0].name = 'Jane'; options.series[0].data = new Array(1, 0, 4);

作為JavaScript對(duì)象文字，我們將像下面這樣編寫。請(qǐng)注意，這兩個(gè)選項(xiàng)對(duì)象將產(chǎn)生完全相同的結(jié)果。

// Good code:
var options = {
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }]
};

在上面的示例中，options對(duì)象是自己創(chuàng)建的，可以通過將其傳遞給圖表構(gòu)造函數(shù)來添加到圖表中：

$(document).ready(function() {
    var chart = new Highcharts.Chart(options);
});

• 使用對(duì)象文字符號(hào)創(chuàng)建對(duì)象后，我們可以通過點(diǎn)符號(hào)擴(kuò)展其成員。假設(shè)我們有一個(gè)類似于上面“良好代碼”中定義的對(duì)象。下面的代碼向它添加了另一個(gè)系列。記住options.series是一個(gè)數(shù)組，所以它具有push方法。
  

options.series.push({
    name: 'John',
    data: [3, 4, 2]
})

• 處理JavaScript對(duì)象時(shí)可以派上用場(chǎng)的另一個(gè)事實(shí)是，點(diǎn)符號(hào)和方括號(hào)符號(hào)是等效的，因此您可以按成員的字符串名稱訪問所有成員。實(shí)際上，這options.renderTo始終與以下內(nèi)容相同：options['renderTo']

全局選項(xiàng)

如果要對(duì)同一頁面上的所有圖表應(yīng)用一組選項(xiàng)，請(qǐng)使用Highcharts.setOptions，如下所示。 

$(function() {
    Highcharts.setOptions({
        chart: {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            },
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        }
    });
    
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
        },
        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 3600 * 1000 // one hour
        }]
    });
    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            type: 'column'
        },
        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 3600 * 1000 // one hour
        }]
    });
});

注意：Highcharts下載隨附的主題使用此功能。

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

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

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