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

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

重要推薦：

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

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

點擊下載Highcharts最新試用版

如何設置選項

高圖表使用JavaScript對象結構定義圖表的選項或設置。本文介紹了options對象如何工作以及如何使用它。

• 選項對象

• 全局選項

選項對象

使用圖表的構造函數Highcharts.Chart初始化圖表時，options對象是您傳遞的第一個參數。

在下面的示例中，標記為紅色的代碼表示options對象：

$(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，了解選項對象的工作方式以及如何以編程方式對其進行更改非常重要。這些是關于JavaScript對象的一些關鍵概念：

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

// 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對象文字，我們將像下面這樣編寫。請注意，這兩個選項對象將產生完全相同的結果。

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

在上面的示例中，options對象是自己創建的，可以通過將其傳遞給圖表構造函數來添加到圖表中：

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

• 使用對象文字符號創建對象后，我們可以通過點符號擴展其成員。假設我們有一個類似于上面“良好代碼”中定義的對象。下面的代碼向它添加了另一個系列。記住options.series是一個數組，所以它具有push方法。
  

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

• 處理JavaScript對象時可以派上用場的另一個事實是，點符號和方括號符號是等效的，因此您可以按成員的字符串名稱訪問所有成員。實際上，這options.renderTo始終與以下內容相同：options['renderTo']

全局選項

如果要對同一頁面上的所有圖表應用一組選項，請使用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正版授權的朋友可以。

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