WebDataRocks在线电子表格excel处理插件demo-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：WebDataRocks在线电子表格excel处理插件demo

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <title>WebDataRocks</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/webdatarocks.min.css">
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/webdatarocks.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/webdatarocks.toolbar.min.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/chart.js"></script>
</head>

<body>
    <div id="wdr-component"></div>
    <div id="wdr-component2"></div>
    <canvas id="polar-chart"></canvas>
    <script>
        var pivot = new WebDataRocks({
            container: "#wdr-component",
            toolbar: true,
            report: {
                dataSource: {
                    filename: "https://cdn.webdatarocks.com/data/data.csv"
                }
            }
        });
        var pivot2 = new WebDataRocks({
            container: "#wdr-component2", toolbar: true, height: 580, width: 900, report: {
                dataSource: {
                    data: getData()}, slice: {
                    reportFilters: [{
                        uniqueName: "Date.Month"
                    }], rows: [{
                        uniqueName: "Country"
                    }, {
                        uniqueName: "Product Category"
                    }], columns: [{
                        uniqueName: "Measures"
                    }], measures: [{
                        uniqueName: "Profit", aggregation: "sum"
                    }, {
                        uniqueName: "Budgeted Expenses", aggregation: "sum"
                    }, {
                        uniqueName: "Actual Expenses", aggregation: "sum"
                    }], expands: {
                        rows: [{
                            tuple: ["Country.France"]}, {
                            tuple: ["Country.Spain"]}]}}, conditions: [{
                        formula: "#value > 15000", measure: "Profit", format: {
                            backgroundColor: "#9CCC65", color: "#000000", fontFamily: "Arial", fontSize: "12px"
                        }}, {
                        formula: "#value > 3000", measure: "Actual Expenses", format: {
                            backgroundColor: "#F44336", color: "#000000", fontFamily: "Arial", fontSize: "12px"
                        }}]}, reportcomplete: function() {
                createPolarChart()}});
        var chart;
        function createPolarChart() {
            webdatarocks.getData({
                slice: {
                    rows: [{
                        uniqueName: "Country", sort: "asc"
                    }], columns: [{
                        uniqueName: "Measures"
                    }], measures: [{
                        uniqueName: "Profit", aggregation: "sum"
                    }]}}, drawChart, updateChart)}function prepareDataFunction(e) {
            var g = {}; var d = []; var b = []; for (var c = 0; c < e.data.length; c++) {
                var f = e.data[c]; if (f.c0 == undefined && f.r0 !== undefined) {
                    var a = f.r0; d.push(a)}if (f.c0 == undefined&f.r0 == undefined) {
                    continue
                }if (f.v0 != undefined) {
                    b.push(!isNaN(f.v0)?f.v0: null)}}g.labels = d; g.data = b; return g
        }
        function drawChart(d) {
            var b = prepareDataFunction(d); var c = {
                datasets: [{
                    data: b.data,
                    backgroundColor: ["#FF6384",
                        "#4BC0C0",
                        "#FFCE56",
                        "#E7E9ED",
                        "#36A2EB",
                        "#9ccc65",
                        "#b3e5fc"]}],
                labels: b.labels
            }; console.log(b.labels); console.log(b.data); options = {
                responsive: true,
                legend: {
                    position: "right",
                },
                title: {
                    display: true,
                    fontSize: 18,
                    text: "Profit by Countries"
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    },
                    reverse: false
                },
                animation: {
                    animateRotate: false,
                    animateScale: true
                }}; var a = document.getElementById("polar-chart").getContext("2d"); chart = new Chart(a, {
                    data: c, type: "polarArea", options: options
                })}function updateChart(d) {
            chart.destroy(); var b = prepareDataFunction(d); var c = {
                datasets: [{
                    data: b.data,
                    backgroundColor: ["#FF6384",
                        "#4BC0C0",
                        "#FFCE56",
                        "#E7E9ED",
                        "#36A2EB",
                        "#9ccc65",
                        "#b3e5fc"]}],
                labels: b.labels
            }; options = {
                responsive: true,
                legend: {
                    position: "right",
                },
                title: {
                    display: true,
                    fontSize: 18,
                    text: "Profit by Countries"
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    },
                    reverse: false
                },
                animation: {
                    animateRotate: false,
                    animateScale: true
                }}; var a = document.getElementById("polar-chart").getContext("2d"); chart = new Chart(a, {
                    data: c, type: "polarArea", options: options
                })}function getData() {
            return[{
                Country: "USA",
                "Product Category": "Entertainment equipment",
                Profit: 455,
                "Actual Expenses": 250,
                "Budgeted Expenses": 55,
                Date: "2015-02-14T07:34:08",
                "Price Per Unit": 45
            },
                {
                    Country: "USA",
                    "Product Category": "Entertainment equipment",
                    Profit: 156,
                    "Actual Expenses": 501,
                    "Budgeted Expenses": 55,
                    Date: "2015-02-14T07:34:08",
                    "Price Per Unit": 48
                },
                {
                    Country: "Spain",
                    "Product Category": "Entertainment equipment",
                    Profit: 455,
                    "Actual Expenses": 302,
                    "Budgeted Expenses": 75,
                    Date: "2016-01-11T07:28:30",
                    "Price Per Unit": 95
                },
                {
                    Country: "Spain",
                    "Product Category": "Entertainment equipment",
                    Profit: 455,
                    "Actual Expenses": 205,
                    "Budgeted Expenses": 75,
                    Date: "2016-01-11T07:28:30",
                    "Price Per Unit": 14
                },
                {
                    Country: "USA",
                    "Product Category": "Entertainment equipment",
                    Profit: 236,
                    "Actual Expenses": 63,
                    "Budgeted Expenses": 55,
                    Date: "2017-11-27T06:52:07",
                    "Price Per Unit": 45
                },
                {
                    Country: "USA",
                    "Product Category": "Entertainment equipment",
                    Profit: 355,
                    "Actual Expenses": 140,
                    "Budgeted Expenses": 55,
                    Date: "2017-11-27T06:52:07",
                    "Price Per Unit": 43
                },
                {
                    Country: "USA",
                    "Product Category": "Entertainment equipment",
                    Profit: 354,
    .........完整代码请登录后点击上方下载按钮下载查看