webdataroc实现数据透视图报表在线excel数据可视化效果-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：webdataroc实现数据透视图报表在线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) {
.........完整代码请登录后点击上方下载按钮下载查看