webdataroc实现数据透视图报表在线excel数据可视化效果
代码语言:html
所属分类:图表
代码描述:webdataroc实现数据透视图报表在线excel数据可视化效果
代码标签: 透视图 报表 在线 excel 数据 可视化 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Poppins'); img.centered { display: block !important; margin: auto !important; color: transparent !important; width: 24px; height: 24px; } body { font-family: "Poppins", Roboto; font-size: 18px; background: #EDEDED; } main { width: 1000px; margin: 10px auto; padding: 10px 20px 30px; background: #FFF; box-shadow: 0 3px 5px rgba(0,0,0,0.2); } p { margin-top: 2rem; font-size: 13px; } #combo-chart-container { width: 900px; height: 300px; position: relative; } #combo-chart-container::before { position: absolute; display: block; width: 900px; height: 300px; left: 200; top: 254px; background: #FAFAFA; box-shadow: 1px 1px 0 0 #DDD; } #pie-chart-container { width: 500px; height: 450px; position: relative; } #pie-chart-container::before { content: ""; position: absolute; display: block; width: 120px; height: 115px; left: 315px; top: 0; background: #FAFAFA; box-shadow: 1px 1px 0 0 #DDD; } #pie-chart-container::after { content: ""; position: absolute; display: block; left: 70px; width: 170px; height: 2px; } </style> </head> <body translate="no"> <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" /> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <main> <h2 style="text-align:center; margin-bottom:2;">Sales Analytics Dashboard</h2><div id="wdr-component"></div> <h3 style="text-align:center; margin-bottom:2px;">Sales by Product Groups</h3> <div id="bar-chart-container-1" style="width:900px;height:450; margin-left: 35px; margin-bottom:0;"></div> <h3 style="text-align:center;">Sales by Channels</h3> <div id="pie-chart-container" style="width:900px;height:450; margin-left: 50px;"></div> <h3 style="text-align:center; margin-bottom:0;">Customer Demographics</h3> <div id="bar-chart-container-2" style="width:900px;height:450; margin-left: 35px; margin-top:15px;"></div> </main> <script> var pivot = new WebDataRocks({ container: "#wdr-component", toolbar: true, height: 550, width: 1000, customizeCell: customizeCellFunction, report: { dataSource: { data: getJSONData() }, "slice": { "rows": [{ "uniqueName": "Location" }], "columns": [{ "uniqueName": "Measures" }, { "uniqueName": "Product Group" }, { "uniqueName": "Product" }], "measures": [{ "uniqueName": "Price", "aggregation": "sum" }] }, "formats": [{ "name": "currency", "thousandsSeparator": " ", "decimalSeparator": ".", "currencySymbol": "$", "currencySymbolAlign": "left", "nullValue": "", "textAlign": "right", "isPercent": false }], "options": { "grid": { "showHeaders": false } } }, reportcomplete: function () { pivot.off("reportcomplete"); pivotTableReportComplete = true; createBarChart(); createPieChart(); createBarChart2(); } }); var pivotTableReportComplete = false; var googleChartsLoaded = false; google.charts.load('current', { 'packages': ['corechart', 'bar'] }); google.charts.setOnLoadCallback(onGoogleChartsLoaded); function onGoogleChartsLoaded() { googleChartsLoaded = true; if (pivotTableReportComplete) { createBarChart(); createPieChart(); createBarChart2(); } } function createBarChart() { if (googleChartsLoaded) { pivot.googlecharts.getData({ type: "bar", "slice": { "rows": [{ "uniqueName": "Location" }], "columns": [{ "uniqueName": "Measures" }, { "uniqueName": "Product Group" }, { "uniqueName": "Product" }], "measures": [{ "uniqueName": "Price", "aggregation": "sum" }, { "uniqueName": "Quantity", "aggregation": "sum" }] } }, drawBarChart, drawBarChart); } } function drawBarChart(_data) { var data = google.visualization.arrayToDataTable(_data.data); var formatter = new google.visualization.NumberFormat({ fractionDigits: 2, prefix: '$' }); formatter.format(data, 1); var options = { colors: ['#2A9D8F', '#E9C46A', '#E76F51'], bars: 'horizontal' }; var chart = new google.charts.Bar(document.getElementById('bar-chart-container-1')); chart.draw(data, options); } function createPieChart() { if (googleChartsLoaded) { pivot.googlecharts.getData({ type: "pie", "slice": { "rows": [{ "uniqueName": "Channel" }], "columns": [{ "uniqueName": "Measures" }], "measures": [{ "uniqueName": "Sales", "formula": "sum(\"Price\") * sum(\"Quantity\")", "individual": true, "caption": "Total Sales" }] } }, drawPieChart, drawPieChart); } } function drawPieChart(_data) { var data = google.visualization.arrayToDataTable(_data.data); var formatter = new google.visualization.NumberFormat({ fractionDigits: 2, prefix: '$' }); formatter.format(data, 1); var options = { legend: { position: 'bottom' }, pieHole: 0.35, chartArea: { height: '85%' }, pieSliceBorderColor: "none", colors: ["#A5D8DD", "#EA6A47", "#0091D5"] }; var chart = new google.visualization.PieChart(document.getElementById('pie-chart-container')); chart.draw(data, options); } function createBarChart2() { if (googleChartsLoaded) { pivot.googlecharts.getData({ type: "bar", "slice": { "rows": [{ "uniqueName": "Customer Gender" }], "columns": [{ "uniqueName": "Measures" }], "measures": [{ "uniqueName": "Customer Gender", "formula": "count(\"Customer Gender\")", "caption": "Total Number" }] } }, drawBarChart2, drawBarChart2); } } function drawBarChart2(_data) { var data = google.visualization.arrayToDataTable(_data.data); var formatter = new google.visualization.NumberFormat({ fractionDigits: 2, prefix: '$' }); formatter.format(data, 1); var options = { colors: ['#2A9D8F'], bars: 'horizontal' }; var chart = new google.charts.Bar(document.getElementById('bar-chart-container-2')); chart.draw(data, options); } /* Insert icons to the cells */ /*Icons made by Smashicons from www.flaticon.com */ function customizeCellFunction(cell, data) { if (data.type == "value" && !data.isDrillThrough && data.isGrandTotalColumn && !data.isTotalRow) { if (data.value < 15000) { cell.text = "<img src='https://image.flaticon.com/icons/svg/138/138350.svg' class='centered'>"; } else if (data.value >= 15000) { cell.text = "<img src='https://image.flaticon.com/icons/svg/138/138349.svg' class='centered'>"; } } } function getJSONData() { return [{ "Price": { type: "number" }, "Quantity": { type: "number" }, "Customer Gender": { type: "string" }, "Customer Age Group": { type: "string" }, "Product Group": { type: "string" }, "Product": { type: "string" }, "Date Order": { type: "date" }, "Country": { type: "level", hierarchy: "Location" }, "City": { type: "level", hierarchy: "Location", parent: "Country" }, "Channel": { type: "string" } }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 174, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-05-28T10:43:10+00:00", "Customer Gender": "Female", "Duration": 829 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 857, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-12-19T10:43:10+00:00", "Customer Gender": "Female", "Duration": 424 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 740, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-02-08T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "15 to 17 years", "Duration": 782 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 988, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-02-15T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "15 to 17 years", "Duration": 475 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Brisbane", "Price": 1255, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-04-18T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "15 to 17 years", "Duration": 997 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 3500, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-05-19T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "30 to 35 years", "Duration": 644 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 1330, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-05-28T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "30 to 35 years", "Duration": 243 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Sydney", "Price": 970, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-06-10T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "30 to 35 years", "Duration": 576 }, { "Product Group": "Servers", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Servers", "Country": "Australia", "City": "Melbourne", "Price": 877, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-06-20T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "30 to 35 years", "Duration": 411 }, { "Product Group": "PC Clients", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "Price": 940, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-11-23T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "30 to 35 years", "Duration": 422 }, { "Product Group": "PC Clients", "Size": "262 oz", "Color": "red", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 557, "Quantity": 225, "Date": "2015-09-06T20:23:13+00:00", "DateTime": "2018-07-30T17:30:32+00:00", "Date Order": "2018-01-03T10:43:10+00:00", "Customer Gender": "Female", "Customer Age Group": "30 to 35 years", "Duration": 754 }, { "Product Group": "PC Clients", "Size": "147 oz", "Color": "white", "Channel": "Call Center", "Product": "Thin Clients", "Country": "France", "City": "Paris", "Price": 242, "Quantity": 855, "Date": "2018-08-23T05:58:56+00:00", "DateTime": "2016-03-06T23:45:26+00:00", "Date Order": "2018-02-15T00:15:47+00:00", "Customer Gender": "Male", "Customer Age Group": "30 to 35 years", "Duration": 554 }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 6829, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-02-15T00:15:47+00:00", "Quantity": 19, "Duration": 757, "Customer Age Group": "30 to 35 years", "Customer Gender": "Male" }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 4221, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-05-28T00:15:47+00:00", "Quantity": 19, "Duration": 787, "Customer Age Group": "30 to 35 years", "Customer Gender": "Male" }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 3041, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-06-10T00:15:47+00:00", "Quantity": 19, "Duration": 711, "Customer Age Group": "30 to 35 years", "Customer Gender": "Male" }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 789, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-06-20T00:15:47+00:00", "Quantity": 19, "Duration": 633, "Customer Age Group": "30 to 35 years", "Customer Gender": "Male" }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 789, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-06-20T00:15:47+00:00", "Quantity": 19, "Duration": 577, "Customer Age Group": "30 to 35 years", "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 789, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-06-20T00:15:47+00:00", "Quantity": 19, "Duration": 841, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "264 oz", "Color": "white", "Channel": "Retail Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 997, "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-11-24T00:15:47+00:00", "Quantity": 19, "Duration": 100, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "76 oz", "Color": "red", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Canada", "City": "Toronto", "Date": "2019-01-08T22:02:31+00:00", "DateTime": "2018-12-10T14:33:25+00:00", "Date Order": "2018-02-15T00:15:47+00:00", "Price": 1664, "Quantity": 19, "Duration": 2200, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "217 oz", "Color": "red", "Channel": "Call Center", "Product": "Thin Clients", "Country": "France", "City": "Paris", "Date": "2014-04-23T03:57:37+00:00", "DateTime": "2014-04-11T04:40:49+00:00", "Date Order": "2018-05-19T03:09:59+00:00", "Price": 2995, "Quantity": 98, "Duration": 310, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "251 oz", "Color": "green", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Germany", "City": "Hamburg", "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-11-23T15:34:42+00:00", "Price": 1487, "Quantity": 96, "Duration": 150, "Customer Gender": "Male" }, { "Product Group": "PC Clients", "Size": "292 oz", "Color": "green", "Channel": "Online Store", "Product": "Thin Clients", "Country": "United Kingdom", "City": "London", "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-11-23T15:34:42+00:00", "Price": 9245, "Quantity": 51, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 865, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-11-23T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 777, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-02-08T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 1025, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-04-18T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 865, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-11-23T15:34:42+00:00", "Quantity": 4513, "Customer Age Group": "21 years", "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 865, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-12-19T15:34:42+00:00", "Quantity": 4513, "Customer Age Group": "21 years", "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 988, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-12-19T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 865, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-12-19T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 865, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-12-19T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "PC Clients", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "Thin Clients", "Country": "Australia", "City": "Melbourne", "Price": 250, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-06-10T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "Tablets", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "eReaders", "Country": "Australia", "City": "Melbourne", "Price": 988, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order": "2018-06-20T15:34:42+00:00", "Quantity": 4513, "Customer Gender": "Female" }, { "Product Group": "Tablets", "Size": "218 oz", "Color": "yellow", "Channel": "Online Store", "Product": "eReaders", "Country": "Australia", "City": "Brisbane", "Price": 440, "Date": "2016-12-11T05:03:28+00:00", "DateTime": "2015-04-17T02:56:57+00:00", "Date Order.........完整代码请登录后点击上方下载按钮下载查看
网友评论0