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": "P.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0