当前位置：首页 > 网页特效 > 图表

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

分类：图表日期：2024-05-14 点击(35) 评论(0)

演示免费下载

简介

#### 简要教程简要教程
sDashboard是一个简单、轻量级的jquery图表插件。

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

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

创建一个最基本的图表
在文件头部引入以下文件

```html

<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
 

<link href="../sDashboard.css" rel="stylesheet">
 

<script src="libs/jquery/jquery-1.8.2.js" type="text/javascript"></script>
 

<script src="libs/jquery/jquery-ui.js" type="text/javascript"></script>
 

<script src="libs/datatables/jquery.dataTables.js"></script>
 

<script src="libs/float/jquery.flotr2.min.js" type="text/javascript"></script>
 

<script src="../jquery-sDashboard.js" type="text/javascript"></script>
```
#### 调用插件

```html
$(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
    });
  });
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果