如果你正在尋找如何創(chuàng)建圖表，那我們這篇文章就是為你準(zhǔn)備的。我曾經(jīng)在網(wǎng)上找了很多的資料，怎樣去完美的解決創(chuàng)建圖表的方案，讓我驚喜的是發(fā)現(xiàn)了一個(gè)很好的很強(qiáng)悍的Javascript圖表庫(kù)：Highcharts。 這是一個(gè)純Javascript庫(kù)，它主要包括兩個(gè)部分：Highcharts和Highstock。Highcharts可以為您的網(wǎng)站或Web應(yīng)用程序提供直觀，互動(dòng)式的圖表。目前支持線，樣條，面積，areaspline，柱形圖，條形圖，餅圖和散點(diǎn)圖類型。Highstock可以為您方便地建立股票或一般的時(shí)間軸圖表。它包括先進(jìn)的導(dǎo)航選項(xiàng)，預(yù)設(shè)的日期范圍，日期選擇器，滾動(dòng)和平移等等。

主要的特性有：

• 兼容性：兼容當(dāng)今所有的瀏覽器，包括iPhone、IE和火狐等等；
• 對(duì)個(gè)人用戶完全免費(fèi)；
• 純JS，無(wú)BS；
• 支持大部分的圖表類型：直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅裝圖、散布圖；
• 跨語(yǔ)言：不管是PHP、Asp.net還是Java都可以使用，它只需要三個(gè)文件：一個(gè)是Highcharts的核心文件highcharts.js，還有a canvas emulator for IE和Jquery類庫(kù)或者M(jìn)ooTools類庫(kù)；
• 提示功能：鼠標(biāo)移動(dòng)到圖表的某一點(diǎn)上有提示信息；
• 放大功能：選中圖表部分放大，近距離觀察圖表；
• 易用性：無(wú)需要特殊的開發(fā)技能，只需要設(shè)置一下選項(xiàng)就可以制作適合自己的圖表；
• 時(shí)間軸：可以精確到毫秒；

我認(rèn)為在現(xiàn)有的階段來(lái)說(shuō)，這是最好的方式來(lái)為用戶表達(dá)圖表信息了。今天就準(zhǔn)備幾個(gè)例子，分享給大家，一起來(lái)見(jiàn)證這精彩的時(shí)刻吧。先看看demo效果圖，也一并提供Highcharts最新版下載，有需要的童鞋請(qǐng)猛擊！

第一步：HTML

<!-- add scripts -->
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/gray.js"></script>
<script src="js/main.js"></script>

其實(shí)Highcharts也是一個(gè)jQuery庫(kù)，所以在頂部還是要引用jQuery庫(kù)。在我們的附件里面，gray.js是自定義圖表設(shè)計(jì)。你還可以看到其他的幾個(gè)小文件：dark-blue.js，dark-green.js，grid.js和skies.js。他們都定義了不同的設(shè)計(jì)風(fēng)格。你可以選擇其中的一個(gè)js文件（本例中是引用了gray.js灰色風(fēng)格）看不同的圖表設(shè)計(jì)。最后一個(gè)文件：main.js這是個(gè)初始化代碼文件。在我們的演示中提供了不同的圖表，讓我們看看最終的代碼：

<!-- Chart type switchers -->
<div>
    <button id="column">column</button>
    <button id="area">area</button>
    <button id="line">line</button>
    <button id="spline">Spine</button>
    <button id="areaspline">areaspline</button>
</div>

<!-- two different charts -->
<div id="chart_1"></div>
<div id="chart_2"></div>

第二步：CSS

現(xiàn)在的圖標(biāo)是沒(méi)有任何的樣式風(fēng)格，我們需要給圖表加上一些固定的寬度和按鈕的樣式：

css/main.css

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
button {
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px;
    margin: 0 5px;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 150px;
}
button:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
button:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}

第三步：JS

js/main.js

最后，讓我們一起看看我們的初始化javascript代碼：

// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}

// Two charts definition
var chart1, chart2;

// Once DOM (document) is finished loading
$(document).ready(function() {

    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Tools developers plans to use to make html5 games (in %)'
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Dev #3',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });

    // Second chart initialization (pie chart)
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });

    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

在一開始的時(shí)候我定義了一個(gè)函數(shù)：ChangeChartType，這個(gè)函數(shù)可以改變我們的圖標(biāo)類型，當(dāng)我們點(diǎn)擊按鈕的時(shí)候，觸發(fā)onClick事件，我們稱之為ChangeChartType功能的ID屬性的值傳遞到這個(gè)函數(shù)（如所需的圖表類型的名稱）。現(xiàn)在，請(qǐng)注意我們?nèi)绾纬跏蓟疕ighcharts.Chart對(duì)象。我們定義了對(duì)象，就出現(xiàn)相對(duì)應(yīng)的圖標(biāo)以及類型，當(dāng)然我們也可以定義X軸和Y軸，更多的可以到去了解API參考文檔。

今天就到這里。我希望這個(gè)非常強(qiáng)大的圖表highcharts將會(huì)對(duì)你有幫助。祝你好運(yùn)，歡迎回來(lái)。有不懂的可以給我們留言，我們將一起探討更多的知識(shí)！

譯文：（本站在原文基礎(chǔ)上增加內(nèi)容補(bǔ)充）

分享自：jiawin

有關(guān)圖表的更多資訊，請(qǐng)移步【圖表專題】

相關(guān)圖表產(chǎn)品推薦和更多服務(wù)，請(qǐng)聯(lián)系