99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

實(shí)例詳解Highcharts圖表庫

發(fā)布時間：2016-08-24 16:56  回復(fù):0  查看:2327   最后回復(fù)：2016-08-24 16:56  

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

主要的特性有：

· 兼容性：兼容當(dāng)今所有的瀏覽器，包括iPhone、IE和火狐等等；

· 對個人用戶完全免費(fèi)；

· 純JS，無BS；

· 支持大部分的圖表類型：直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅裝圖、散布圖；

· 跨語言：不管是PHP、Asp.net還是Java都可以使用，它只需要三個文件：一個是Highcharts的核心文件highcharts.js，還有a canvas emulator for IE和Jquery類庫或者M(jìn)ooTools類庫；

· 提示功能：鼠標(biāo)移動到圖表的某一點(diǎn)上有提示信息；

· 放大功能：選中圖表部分放大，近距離觀察圖表；

· 易用性：無需要特殊的開發(fā)技能，只需要設(shè)置一下選項(xiàng)就可以制作適合自己的圖表；

· 時間軸：可以精確到毫秒；

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

第一步：HTML

1

2

3

4

5

<!-- add scripts -->

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

1

2

3

4

5

6

7

8

9

10

11

12

<!-- 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)是沒有任何的樣式風(fēng)格，我們需要給圖表加上一些固定的寬度和按鈕的樣式：

css/main.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

.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代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

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

 

文章來自：慧都控件網(wǎng)

您還未登錄，請先登錄

熱門帖子

最新帖子

?