码迷,mamicode.com
首页 > Web开发 > 详细

强悍的Javascript图表库:Highcharts

时间:2016-08-24 16:54:38      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:

如果你正在寻找如何创建图表,那我们这篇文章就是为你准备的。我曾经在网上找了很多的资料,怎样去完美的解决创建图表的方案,让我惊喜的是发现了一个很好的很强悍的Javascript图表库:Highcharts。这是一个纯Javascript库,它主要包括两个部分:Highcharts和Highstock。Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。接下来,我们就用实例来学习Highcharts

主要的特性有:

· 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;

· 对个人用户完全免费;

· 纯JS,无BS;

· 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;

· 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库;

· 提示功能:鼠标移动到图表的某一点上有提示信息;

· 放大功能:选中图表部分放大,近距离观察图表;

· 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;

· 时间轴:可以精确到毫秒;

我认为在现有的阶段来说,这是最好的方式来为用户表达图表信息了。今天就准备几个例子,分享给大家,一起来见证这精彩的时刻吧。先看看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>

其实Highcharts也是一个jQuery库,所以在顶部还是要引用jQuery库。在我们的附件里面,gray.js是自定义图表设计。你还可以看到其他的几个小文件:dark-blue.js,dark-green.js,grid.js和skies.js。他们都定义了不同的设计风格。你可以选择其中的一个js文件(本例中是引用了gray.js灰色风格)看不同的图表设计。最后一个文件: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

现在的图标是没有任何的样式风格,我们需要给图表加上一些固定的宽度和按钮的样式:

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);

    });

});

在一开始的时候我定义了一个函数:ChangeChartType,这个函数可以改变我们的图标类型,当我们点击按钮的时候,触发onClick事件,我们称之为ChangeChartType功能的ID属性的值传递到这个函数(如所需的图表类型的名称)。现在,请注意我们如何初始化Highcharts.Chart对象。我们定义了对象,就出现相对应的图标以及类型,当然我们也可以定义X轴和Y轴,更多的可以到官方网站去了解API参考文档。

 

文章来自:慧都控件网

强悍的Javascript图表库:Highcharts

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
jiangjie190
加入时间:2016-02-19
  关注此人  发短消息
文章分类
jiangjie190”关注的人------(0
jiangjie190”的粉丝们------(1
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!