web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
图表
sDashboard简单轻量级的jquery图表插件
分类:
图表
日期:
2024-05-14
点击(35)
评论(0)
演 示
免费下载
简介
#### 简要教程简要教程 sDashboard是一个简单、轻量级的jquery图表插件。 sDashboard能将对象数组转换为jQuery图表的插件。每个对象数组将被渲染成一张图表,并且这张图表是可以被拖动、放大和关闭的。 sDashboard支持了渲染DataTable和flotr2图。它也支持侦听事件如单击图表数据表行,单击并选择图表数据。 创建一个最基本的图表 在文件头部引入以下文件 ```html
``` #### 调用插件 ```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 }); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告