轉帖|使用教程|編輯:黃竹雯|2016-05-09 16:45:15.000|閱讀 558 次
概述:如果你正在尋找如何創(chuàng)建圖表,那我們這篇文章就是為你準備的。我曾經在網上找了很多的資料,怎樣去完美的解決創(chuàng)建圖表的方案,讓我驚喜的是發(fā)現了一個很好的很強悍的Javascript圖表庫:Highcharts。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
如果你正在尋找如何創(chuàng)建圖表,那我們這篇文章就是為你準備的。我曾經在網上找了很多的資料,怎樣去完美的解決創(chuàng)建圖表的方案,讓我驚喜的是發(fā)現了一個很好的很強悍的Javascript圖表庫:Highcharts。 這是一個純Javascript庫,它主要包括兩個部分:Highcharts和Highstock。Highcharts可以為您的網站或Web應用程序提供直觀,互動式的圖表。目前支持線,樣條,面積,areaspline,柱形圖,條形圖,餅圖和散點圖類型。Highstock可以為您方便地建立股票或一般的時間軸圖表。它包括先進的導航選項,預設的日期范圍,日期選擇器,滾動和平移等等。
主要的特性有:
我認為在現有的階段來說,這是最好的方式來為用戶表達圖表信息了。今天就準備幾個例子,分享給大家,一起來見證這精彩的時刻吧。先看看demo效果圖,也一并提供Highcharts最新版下載,有需要的童鞋請猛擊!
<!-- 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>
其實Highcharts也是一個jQuery庫,所以在頂部還是要引用jQuery庫。在我們的附件里面,gray.js是自定義圖表設計。你還可以看到其他的幾個小文件:dark-blue.js,dark-green.js,grid.js和skies.js。他們都定義了不同的設計風格。你可以選擇其中的一個js文件(本例中是引用了gray.js灰色風格)看不同的圖表設計。最后一個文件:main.js這是個初始化代碼文件。在我們的演示中提供了不同的圖表,讓我們看看最終的代碼:
<!-- 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>
現在的圖標是沒有任何的樣式風格,我們需要給圖表加上一些固定的寬度和按鈕的樣式:
.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;
}
最后,讓我們一起看看我們的初始化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);
    });
});
在一開始的時候我定義了一個函數:ChangeChartType,這個函數可以改變我們的圖標類型,當我們點擊按鈕的時候,觸發(fā)onClick事件,我們稱之為ChangeChartType功能的ID屬性的值傳遞到這個函數(如所需的圖表類型的名稱)。現在,請注意我們如何初始化Highcharts.Chart對象。我們定義了對象,就出現相對應的圖標以及類型,當然我們也可以定義X軸和Y軸,更多的可以到去了解API參考文檔。
今天就到這里。我希望這個非常強大的圖表highcharts將會對你有幫助。祝你好運,歡迎回來。有不懂的可以給我們留言,我們將一起探討更多的知識!
譯文:(本站在原文基礎上增加內容補充)
分享自:jiawin
本站文章除注明轉載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn