sDashboard简单轻量级的jquery图表插件

图表 图表插件 2014-10-20

控件介绍
sDashboard是一个能将对象数组转换为jQuery图表的插件。每个对象数组将被渲染成一张图表,并且这张图表是可以被拖动、放大和关闭的。
浏览器兼容

支持IE9+

演示下载 1036
使用方法

sDashboard能将对象数组转换为jQuery图表的插件。每个对象数组将被渲染成一张图表,并且这张图表是可以被拖动、放大和关闭的。

sDashboard支持了渲染DataTable和flotr2图。它也支持侦听事件如单击图表数据表行,单击并选择图表数据。

创建一个最基本的图表

在文件头部引入以下文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- load jquery ui css theme -->
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
 
<!-- load the sDashboard css -->
<link href="../sDashboard.css" rel="stylesheet">
 
<!-- load jquery library -->
<script src="libs/jquery/jquery-1.8.2.js" type="text/javascript"></script>
 
<!-- load jquery ui library -->
<script src="libs/jquery/jquery-ui.js" type="text/javascript"></script>
 
<!-- load datatables library -->
<script src="libs/datatables/jquery.dataTables.js"></script>
 
<!-- load flot charting library -->
<script src="libs/float/jquery.flotr2.min.js" type="text/javascript"></script>
 
<!-- load sDashboard library -->
<script src="../jquery-sDashboard.js" type="text/javascript"></script>

调用插件

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
$(function(){
    var randomString = "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean lacinia mollis condimentum. Proin vitae ligula quis ipsum elementum tristique. Vestibulum ut sem erat.";
    //dashboard json data
    //this is the data format that the dashboard framework expects
    //**********************************************//
    var dashboardJSON = [{
      widgetTitle : "Bubble Chart Widget",
      widgetId : "id009",
      widgetType : "chart",
      enableRefresh: true,
      refreshCallBack : function(widgetId){
        var refreshedData = {
          data : myExampleData.constructBubbleChartData(),
          options : myExampleData.bubbleChartOptions
        };
        return refreshedData;
      },
      widgetContent : {
        data : myExampleData.bubbleChartData,
        options : myExampleData.bubbleChartOptions
      }
 
    }, {
      widgetTitle : "Table Widget",
      widgetId : "id3",
      widgetType : "table",
      enableRefresh : true,
      refreshCallBack : function(widgetData){
        return {
        "aaData" : [myExampleData.constructTableWidgetData(),
              myExampleData.constructTableWidgetData(),
              myExampleData.constructTableWidgetData(),
              myExampleData.constructTableWidgetData(),
              myExampleData.constructTableWidgetData(),
              myExampleData.constructTableWidgetData(),
              myExampleData.constructTableWidgetData()
              ],
 
              "aoColumns" : [{
              "sTitle" : "Engine"
              }, {
              "sTitle" : "Browser"
              }, {
              "sTitle" : "Platform"
              }]
            };
      },
      widgetContent : myExampleData.tableWidgetData
    }, {
      widgetTitle : "Text Widget",
      widgetId : "id2",
      enableRefresh : true,
      refreshCallBack : function(widgetId){
        return randomString + new Date();
      },
      widgetContent : randomString
    }, {
      widgetTitle : "Pie Chart Widget",
      widgetId : "id001",
      widgetType : "chart",
      widgetContent : {
        data : myExampleData.pieChartData,
        options : myExampleData.pieChartOptions
      }
 
    }, {
      widgetTitle : "bar Chart Widget",
      widgetId : "id002",
      widgetType : "chart",
      enableRefresh: true,
      refreshCallBack : function(widgetId){
        var refreshedData = {
          data : myExampleData.constructBarChartData(),
          options : myExampleData.barChartOptions
        };
        return refreshedData;
      },
      widgetContent : {
        data : myExampleData.barChartData,
        options : myExampleData.barChartOptions
      }
 
    }, {
      widgetTitle : "line Chart Widget",
      widgetId : "id003",
      widgetType : "chart",
      getDataBySelection : true,
      widgetContent : {
        data : myExampleData.lineChartData,
        options : myExampleData.lineChartOptions
      }
 
    }, {
      widgetTitle : "Adding an existing dom element",
      widgetId : "tweet123",
      widgetContent : $("#myTweets")
    }];
    //basic initialization example
    $("#myDashboard").sDashboard({
      dashboardData : dashboardJSON
    });
  });

更多信息:http://modeln.github.io/sDashboard/

本文转载请注明出处:http://www.zhuiye.com/detail_46.html