首页 > 其他分享 >透视表

透视表

时间：2024-08-06 15:06:14浏览次数：5  
标签：透视 Number item key var data find 

<style>
    .dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-area-data {
        font-size: 16px;
    }

    .dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-horizontal-headers, .dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-vertical-headers {
        font-size: 16px;
    }

    .bg-light-gray {
        background-color: lightgray !important
    }

    .dx-pivotgrid .dx-area-description-cell, .dx-pivotgrid .dx-column-header, .dx-pivotgrid .dx-data-header, .dx-pivotgrid .dx-total {
        background-color: inherit;
    }

    .total-border {
        border-left: 2px solid #8ac9ff !important;
        border-right: 2px solid #8ac9ff !important;
    }
</style>
<div class="page-inner">
    <div class="page-header">
        <ul class="breadcrumbs" style="margin-left: 0px;">
            <li class="nav-home">
                <a href="/">
                    <i class="flaticon-home"></i>
                </a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="" onclick="location.reload();">Spring Board</a>
            </li>
        </ul>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12">
                    <div id="gridContainer" style="font-size: medium; padding-top: 5px;"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div id="pivotGridContainer" style="font-size: medium; padding-top: 20px;"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div id="chart-container-1" style="margin-top:24px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/highcharts/7.1.2/highcharts.js"></script>
<script>

    var ValuesA = [
        //{
        //    y: 2023, data: [
        //        { key: 'ISO pipe 152', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 103', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 81', data: ['', '', '', ''] }
        //    ]
        //},
        {
            y: 2024, data: [
                { key: '152', data: [10.3, '', '', 1.6] },
                { key: '116/121', data: [6, 7, 14, 0] },
                { key: '103', data: ['', 4.6, 2.3, ''] },
                { key: '81', data: ['', 5, 2, ''] }
            ]
        },
        {
            y: 2025, data: [
                { key: '152', data: [11, '', '', ''] },
                { key: '116/121', data: [6.8, 7, 13, ''] },
                { key: '103', data: ['', 4.1, 2.3, ''] },
                { key: '81', data: ['', 5, 1.2, ''] }
            ]
        },
        {
            y: 2026, data: [
                { key: '152', data: [11, '', '', ''] },
                { key: '116/121', data: [6.4, 11, 15, ''] },
                { key: '103', data: ['', 5, 3.4, ''] },
                { key: '81', data: ['', 4, 2, ''] }
            ]
        },
        {
            y: 2027, data: [
                { key: '152', data: [11, '', '', ''] },
                { key: '116/121', data: [6.4, 10, 17, ''] },
                { key: '103', data: ['', 4.4, 3.4, ''] },
                { key: '81', data: ['', 3.5, 2, ''] }
            ]
        }];
    var ValuesB = [
        //{
        //    y: 2023, data: [
        //        { key: 'ISO pipe 152', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 103', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 81', data: ['', '', '', ''] }
        //    ]
        //},
        {
            y: 2024, data: [
                { key: '152', data: [1.3, '', '', ''] },
                { key: '116/121', data: ['', 0.7, 0.7, ''] },
                { key: '103', data: ['', '', 0.7, ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2025, data: [
                { key: '152', data: [0.2, '', '', ''] },
                { key: '116/121', data: ['', 1.3, 1.3, ''] },
                { key: '103', data: ['', 0.1, 0.4, ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2026, data: [
                { key: '152', data: [0.6, '', '', ''] },
                { key: '116/121', data: ['', '', 1.7, ''] },
                { key: '103', data: ['', 0.8, 0.4, ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2027, data: [
                { key: '152', data: [0.6, '', '', ''] },
                { key: '116/121', data: ['', 0.6, 0.9, ''] },
                { key: '103', data: ['', 0.3, 0.3, ''] },
                { key: '81', data: ['', 0.3, '', ''] }
            ]
        }];
    var ValuesC = [
        //{
        //    y: 2023, data: [
        //        { key: 'ISO pipe 152', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 103', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 81', data: ['', '', '', ''] }
        //    ]
        //},
        {
            y: 2024, data: [
                { key: '152', data: ['11.6', '', '', '1.6'] },
                { key: '116/121', data: ['6', '7.7', '14.7', ''] },
                { key: '103', data: ['', '4.6', '3', ''] },
                { key: '81', data: ['', '5', '2', ''] }
            ]
        },
        {
            y: 2025, data: [
                { key: '152', data: ['11.2', '', '', ''] },
                { key: '116/121', data: ['6.8', '8.3', '14.3', ''] },
                { key: '103', data: ['', '4.2', '2.7', ''] },
                { key: '81', data: ['', '5', '1.2', ''] }
            ]
        },
        {
            y: 2026, data: [
                { key: '152', data: ['11.6', '', '', ''] },
                { key: '116/121', data: ['6.4', '11', '16.7', ''] },
                { key: '103', data: ['', '5.8', '3.8', ''] },
                { key: '81', data: ['', '4', '2', ''] }
            ]
        },
        {
            y: 2027, data: [
                { key: '152', data: ['11.6', '', '', ''] },
                { key: '116/121', data: ['6.4', '10.6', '17.9', ''] },
                { key: '103', data: ['', '4.7', '3.7', ''] },
                { key: '81', data: ['', '3.8', '2', ''] }
            ]
        }];
    var ValuesD = [
        //{
        //    y: 2023, data: [
        //        { key: 'ISO pipe 152', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 103', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 81', data: ['', '', '', ''] }
        //    ]
        //},
        {
            y: 2024, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', 0.6, ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2025, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', 0.3, ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2026, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', 2.3, ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2027, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', 2.3, ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        }];
    var ValuesE = [
        //{
        //    y: 2023, data: [
        //        { key: 'ISO pipe 152', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 103', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 81', data: ['', '', '', ''] }
        //    ]
        //},
        {
            y: 2024, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '3.4', '5.1', ''] },
                { key: '103', data: ['', '0.4', '0.6', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2025, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', 1.6, 6.3, ''] },
                { key: '103', data: ['', 1.9, 1.2, ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2026, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', 1.2, ''] },
                { key: '103', data: ['', 0.1, '', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        },
        {
            y: 2027, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', 0.3, ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', '', ''] }
            ]
        }];
    var ValuesF = [
        //{
        //    y: 2023, data: [
        //        { key: 'ISO pipe 152', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 103', data: ['', '', '', ''] },
        //        { key: 'ISO pipe 81', data: ['', '', '', ''] }
        //    ]
        //},
        {
            y: 2024, data: [
                { key: '152', data: ['', '', '', '2.4'] },
                { key: '116/121', data: ['', '', '', ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', 2, ''] }
            ]
        },
        {
            y: 2025, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', '', ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', '', 2, ''] }
            ]
        },
        {
            y: 2026, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', '', ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', 0.1, 2, ''] }
            ]
        },
        {
            y: 2027, data: [
                { key: '152', data: ['', '', '', ''] },
                { key: '116/121', data: ['', '', '', ''] },
                { key: '103', data: ['', '', '', ''] },
                { key: '81', data: ['', 1.8, 2, ''] }
            ]
        }];

    var dxPivotGrid1;
    var dxPivotGrid2;

    var addBorder = function (domId) {
        var cols = $('#' + domId).find('.dx-pivotgrid-horizontal-headers').find('table').find('thead').find('tr').eq(0).find('td');
        var indexs = [];

        index = 0;
        for (item of cols) {
            var colspan = $(item).attr('colspan');
            if (colspan) {
                index += Number(colspan);
            } else {
                index++;
            }
            if ($(item).hasClass('dx-total')) {
                indexs.push(index);
                $(item).addClass('total-border');
            }
        }

        var rows = $('#' + domId).find('.dx-area-data-cell').find('table').find('tbody').find('tr');
        for (item of rows) {
            var cells = $(item).find('td');
            for (i of indexs) {
                $(cells).eq(i - 1).addClass('total-border');
            }
        }
    }
    $(function () {
        var list = [];
        var row = [];

        var site = ['CN', 'TW', 'CPM', 'JP'];
        var Subcategorys = ['152', '116/121', '103', '81'];

        var Categorys = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];
        Categorys.push('(a) Operating Tanks');
        Categorys.push('(b) Ready to Light + Hot soak');
        Categorys.push('(c) Not available - waiting for rebuild without capital');
        Categorys.push('(d) Not avilable - Cold');

        var Values = [
            { index: 0, key: '(a) Hot Tanks', data: ValuesA },
            { index: 1, key: '(b) Rebuild/Start-up DT', data: ValuesB },
            { index: 2, key: '(a) Operating Tanks', data: ValuesC },
            { index: 3, key: '(b) Ready to Light + Hot soak', data: ValuesD },
            { index: 4, key: '(c) Not available - waiting for rebuild without capital', data: ValuesE },
            { index: 5, key: '(d) Not avilable - Cold', data: ValuesF }
        ];

        for (var x = 2; x < Categorys.length; x++) {
            for (var i = 2024; i <= 2027; i++) {
                for (var j = 0; j < site.length; j++) {
                    for (var m = 0; m < Subcategorys.length; m++) {

                        if (Categorys[x] == '(a) Operating Tanks') {
                            var filterData = Values.find(c => c.key == '(a) Hot Tanks');
                            var yearData = filterData.data.find(c => c.y == i);
                            var data = yearData.data.find(c => c.key == Subcategorys[m]);

                            var value = data.data[j];
                            var temp = {
                                year: i,
                                Category: Categorys[x],
                                Subcategory: Subcategorys[m],
                                Value: value,
                                site: site[j],
                                Category_1: 'Hot Tanks'
                            };
                            list.push(temp);

                            //----------------------------------------------
                            filterData = Values.find(c => c.key == '(b) Rebuild/Start-up DT');
                            yearData = filterData.data.find(c => c.y == i);
                            data = yearData.data.find(c => c.key == Subcategorys[m]);

                            value = data.data[j];
                            var temp2 = {
                                year: i,
                                Category: Categorys[x],
                                Subcategory: Subcategorys[m],
                                Value: value,
                                site: site[j],
                                Category_1: 'Rebuild/Start-up DT'
                            };
                            list.push(temp2);

                        } else {

                            var filterData = Values.find(c => c.key == Categorys[x]);
                            var yearData = filterData.data.find(c => c.y == i);
                            var data = yearData.data.find(c => c.key == Subcategorys[m]);

                            var value = data.data[j];
                            var temp = {
                                year: i,
                                Category: Categorys[x],
                                Subcategory: Subcategorys[m],
                                Value: value,
                                site: site[j],
                                Category_1: 'Isopipe'
                            };
                            list.push(temp);
                        }
                    }

                }
            }
        }


        var index = 0;
        dxPivotGrid1 = $('#gridContainer').dxPivotGrid({
            allowSortingBySummary: true,
            allowSorting: true,
            allowFiltering: true,
            allowExpandAll: true,
            //width: 1000,
            showBorders: true,
            showColumnGrandTotals: false,
            showRowGrandTotals: true,
            texts: {
                grandTotal: "Total (A+B+C+D)"
            },
            fieldChooser: {
                enabled: false,
            },
            onContentReady() {
                var data_cells = $('#gridContainer').find('.dx-area-data-cell').find('table')
                    .find('colgroup').find('col');
                var cate_cells = $('#gridContainer').find('.dx-area-row-cell').find('table')
                    .find('colgroup').find('col');

                var cate_table_width = 0;
                if (cate_cells.length == 2) {
                    cate_table_width = 200;
                } else if (cate_cells.length == 3) {
                    cate_table_width = 340;
                }
                if (data_cells.length < 5) {
                    dxPivotGrid1.option('width', 700 + cate_table_width);
                } else if (data_cells.length < 10) {
                    dxPivotGrid1.option('width', 900 + cate_table_width);
                } else if (data_cells.length < 15) {
                    dxPivotGrid1.option('width', 1100 + cate_table_width);
                } else if (data_cells.length < 20) {
                    dxPivotGrid1.option('width', 1300 + cate_table_width > 1550 ? 1550 : 1300 + cate_table_width);
                } else {
                    dxPivotGrid1.option('width', 1550);
                }


                $('#gridContainer').find('.custom-add-row').remove();
                $('#gridContainer').find('.dx-area-description-cell')
                    .find('.dx-pivotgrid-toolbar')
                    .css('line-height', '32px')
                    .text('Category').css('font-weight', 'bold');
                var headerRow = $('#gridContainer').find('.dx-area-description-cell')
                    .parent().clone();

                $(headerRow)
                    .addClass('custom-add-row')
                    .find('.dx-pivotgrid-toolbar')
                    .css('line-height', '36px')
                    .text('Tank Count');
                $(headerRow).find('.dx-area-column-cell')
                    .html('Asset Tank Count')
                    .css('line-height', '36px')
                    .css('background-color', '#003466')
                    .css('color', '#fff')
                    .css('font-weight', 'bold')
                    .css('text-align', 'center');
                $(headerRow).insertBefore($('#gridContainer').find('.dx-area-description-cell').parent());

                //var arr = [
                //    { key: '(a) Hot Tanks', index: -1 },
                //    { key: '(b) Rebuild/Start-up DT', index: -1 },
                //    { key: '(c) Operating Tanks', index: -1 }
                //];
                //var notBold = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT', '(a) Hot Tanks Total', '(b) Rebuild/Start-up DT Total'];

                var leftRows = $('#gridContainer').find('.dx-pivotgrid-vertical-headers tbody').find('tr');

                for (var i = 0; i < leftRows.length; i++) {
                    var row = leftRows[i];
                    var cell = $(row).find('td').eq(0);
                    var rowspan = $(cell).attr('rowspan');

                    var text = $(cell).text();
                    //var item = arr.find(c => c.key == text);
                    //if (item) {
                    //    if (rowspan) {
                    //        item.index = i + 4;
                    //    } else {
                    //        item.index = i;
                    //    }
                    //}

                    if (rowspan) {
                        i = i + parseInt(rowspan) - 1;
                    }
                    //if (!(notBold.find(c => c == text))) {
                    //    $(cell).css('font-weight', 'bold');//.css('color', 'rgb(18 105 219)')
                    //}
                }

                var rows = $('#gridContainer').find('.dx-area-data-cell').find('tbody').find('tr');


                var textRightRow = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];

                //for (var i = 0; i < rows.length; i++) {
                //    var lastCol = $(rows[i]).find('td').last();
                //    $(lastCol).hide();
                //}

                //var colgroup = $('.dx-area-data-cell').find('colgroup');
                //$(colgroup).find('col').last().hide();
                //$('.dx-area-column-cell').find('table').find('colgroup').find('col').last().hide();
                //var headerRows = $('.dx-area-column-cell').find('table').find('thead').find('tr');
                //for (var i = 0; i < 1; i++) {
                //    $(headerRows[i]).find('td').last().hide();
                //}
                var grayLines = Values.filter(c => c.index > 1);
                $(leftRows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
                $(rows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
                for (var i = 0; i < leftRows.length; i++) {
                    var leftRow = leftRows[i];
                    var cell = $(leftRow).find('td').eq(0);
                    var rowspan = $(cell).attr('rowspan');

                    var text = $(cell).text().replace(' Total', '');

                    if (textRightRow.findIndex(c => c == text) > -1) {
                        $(cell).find('span').css('float', 'right');
                    }

                    //if (grayLines.findIndex(c => c.key == text) > -1) {
                    //    $(leftRow).addClass('bg-light-gray');
                    //    $(rows[i]).addClass('bg-light-gray');

                    //    if (rowspan && parseInt(rowspan) > 0) {
                    //        rowspan = parseInt(rowspan);
                    //        for (var j = 1; j < rowspan; j++) {
                    //            leftRow = $(leftRow).next();
                    //            $(leftRow).addClass('bg-light-gray');

                    //            $(rows[i + j]).addClass('bg-light-gray');
                    //        }
                    //    }
                    //}
                }

                setTimeout(function () {
                    addBorder('gridContainer');
                }, 100);



                //var row_a = rows[arr[0].index];
                //var row_b = rows[arr[1].index];
                //var row_c = rows[arr[2].index];
                //var row_last = rows[rows.length - 1];
                //var cols_c = $(row_c).find('td');
                //var cols_a = $(row_a).find('td');
                //var cols_b = $(row_b).find('td');
                //var cols_total = $(row_last).find('td');
                //for (var i = 0; i < cols_c.length; i++) {
                //    //var cell_a = $(cols_a[i]).text();
                //    //var cell_b = $(cols_b[i]).text();
                //    //var value = (Number(cell_a) * 100 + Number(cell_b) * 100) / 100;
                //    //var value = Number(value.toFixed(2));
                //    //$(cols_c[i]).find('span').text(value);
                //    var cell_c = $(cols_c[i]).text();
                //    var total = $(cols_total[i]).text();
                //    var value = (Number(total) * 100 - Number(cell_c) * 100) / 100;
                //    value = Number(value.toFixed(2));
                //    $(cols_total[i]).find('span').text(value);
                //}


                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    $(row).find('td').css('font-weight', 'bold');
                }
                //debugger
                for (var i = 0; i < leftRows.length; i++) {
                    var row = leftRows[i];
                    $(row).find('td').css('font-weight', 'bold');
                    //var td = $(row).find('td').eq(0);
                    //var rowspan = $(td).attr('rowspan');

                    //if (rowspan) {
                    //    i = i + parseInt(rowspan);
                    //} else {
                    //    row = rows[i];
                    //    $(row).find('td').css('font-weight', 'bold');
                    //}
                }

                clearInterval();
                $('#gridContainer')
                    .find('.dx-area-data-cell')
                    .find('.dx-scrollable-content')
                    .css('margin-bottom', '10px');
                setInterval(function () {
                    $('#gridContainer')
                        .find('.dx-area-data-cell')
                        .find('.dx-scrollable-scrollbar')
                        .eq(0)
                        .addClass('dx-state-hover')
                        .find('.dx-scrollable-scroll')
                        .removeClass('dx-state-invisible');
                }, 500);

            },
            dataSource: {
                fields: [{
                    caption: 'Category',
                    width: 250,
                    dataField: 'Category',
                    area: 'row',
                    sortingMethod: function (a, b) {
                        var displayTexts = ['(a) Operating Tanks', '(b) Ready to Light + Hot soak',
                            '(c) Not available - waiting for rebuild without capital', '(d) Not avilable - Cold'];
                        var values = [1, 2, 3, 4];

                        var index1 = displayTexts.findIndex(c => c == a.value);
                        var index2 = displayTexts.findIndex(c => c == b.value);

                        var value1 = values[index1];
                        var value2 = values[index2];
                        /*var fieldSortOrder = this.sortOrder;*/
                        if (value1 < value2) {
                            return 1;
                        } else if (value1 > value2) {
                            return 2;
                        } else {
                            return 0;
                        }
                    },
                }, {
                    caption: 'Category_1',
                    dataField: 'Category_1',
                    width: 220,
                    area: 'row',
                }, {
                    caption: 'Subcategory',
                    dataField: 'Subcategory',
                    width: 90,
                    area: 'row',
                    sortBy: 'value',
                    sortingMethod: function (a, b) {
                        var temps = [
                            { displayText: '152', value: 1 },
                            { displayText: '116/121', value: 2 },
                            { displayText: '103', value: 3 },
                            { displayText: '81', value: 4 }
                        ];

                        var value1 = temps.find(c => c.displayText == a.value).value;
                        var value2 = temps.find(c => c.displayText == b.value).value;
                        /*var fieldSortOrder = this.sortOrder;*/
                        if (value1 < value2) {
                            return 1;
                        } else if (value1 > value2) {
                            return 2;
                        } else {
                            return 0;
                        }
                    },
                    selector(data) {
                        return data.Subcategory;
                    },
                }, {
                    dataField: 'year',
                    area: 'column',
                    expanded: true,
                }, {
                    dataField: 'site',
                    area: 'column',
                    sortingMethod: function (a, b) {
                        var temps = [
                            { displayText: 'CN', value: 1 },
                            { displayText: 'TW', value: 2 },
                            { displayText: 'CPM', value: 3 },
                            { displayText: 'JP', value: 4 }
                        ];

                        var value1 = temps.find(c => c.displayText == a.value).value;
                        var value2 = temps.find(c => c.displayText == b.value).value;
                        /*var fieldSortOrder = this.sortOrder;*/
                        if (value1 < value2) {
                            return 1;
                        } else if (value1 > value2) {
                            return 2;
                        } else {
                            return 0;
                        }
                    },
                }, {
                    caption: 'Value',
                    dataField: 'Value',
                    //showTotals: true,
                    showGrandTotals: true,
                    dataType: 'number',
                    summaryType: 'sum',
                    //summaryType: 'custom',
                    //calculateSummaryValue(summaryCell) {
                    //    debugger
                    //    const prevCell = summaryCell.prev('column', true);
                    //    if (prevCell) {
                    //        const prevVal = prevCell.value("Total Amount");
                    //        const currentVal = summaryCell.value("Total Amount");
                    //        return currentVal - prevVal;
                    //    }
                    //    return null;
                    //},
                    format: {
                        type: "fixedPoint",
                        precision: 1
                    },
                    area: 'data',
                }],
                store: list,
            },
        }).dxPivotGrid('instance');
    });



    $(function () {
        var list = [];
        var row = [];

        var site = ['CN', 'TW', 'CPM', 'JP'];
        var Subcategorys = ['152', '116/121', '103', '81'];

        var Categorys = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];
        Categorys.push('(a) Operating Tanks');
        Categorys.push('(b) Ready to Light + Hot soak');
        Categorys.push('(c) Not available - waiting for rebuild without capital');
        Categorys.push('(d) Not avilable - Cold');

        var maps = [{
            isopipe: '152', monthly: 9.5, FGE: 8.1
        }, {
            isopipe: '121', monthly: 8, FGE: 6.8
        }, {
            isopipe: '116', monthly: 7, FGE: 6
        }, {
            isopipe: '103', monthly: 4.5, FGE: 3.8
        }, {
            isopipe: '81', monthly: 2.8, FGE: 2.4
        }];

        var capacity_value_a = [];
        var capacity_value_b = [];
        var capacity_value_c = [];
        var capacity_value_d = [];
        var capacity_value_e = [];
        var capacity_value_f = [];
        for (item of ValuesA) {
            //var num = Number(item.data[0].data[1]);

            capacity_value_a.push({
                y: item.y,
                data: [
                    {
                        key: '152',
                        data:
                            [
                                Number(item.data[0].data[0]) * maps[0].FGE * 12,
                                Number(item.data[0].data[1]) * maps[0].FGE * 12,
                                Number(item.data[0].data[2]) * maps[0].FGE * 12,
                                Number(item.data[0].data[3]) * maps[0].FGE * 12
                            ]
                    },
                    {
                        key: '116/121',
                        data:
                            [
                                Number(item.data[1].data[0]) * maps[1].FGE * 12,
                                Number(item.data[1].data[1]) * maps[1].FGE * 12,
                                Number(item.data[1].data[2]) * maps[1].FGE * 12,
                                Number(item.data[1].data[3]) * maps[1].FGE * 12
                            ]
                    },
                    {
                        key: '103',
                        data:
                            [
                                Number(item.data[2].data[0]) * maps[3].FGE * 12,
                                Number(item.data[2].data[1]) * maps[3].FGE * 12,
                                Number(item.data[2].data[2]) * maps[3].FGE * 12,
                                Number(item.data[2].data[3]) * maps[3].FGE * 12
                            ]
                    },
                    {
                        key: '81',
                        data:
                            [
                                Number(item.data[3].data[0]) * maps[4].FGE * 12,
                                Number(item.data[3].data[1]) * maps[4].FGE * 12,
                                Number(item.data[3].data[2]) * maps[4].FGE * 12,
                                Number(item.data[3].data[3]) * maps[4].FGE * 12
                            ]
                    }
                ]
            });
        }

        for (item of ValuesB) {
            //var num = Number(item.data[0].data[1]);

            capacity_value_b.push({
                y: item.y,
                data: [
                    {
                        key: '152',
                        data:
                            [
                                Number(item.data[0].data[0]) * maps[0].FGE * 12,
                                Number(item.data[0].data[1]) * maps[0].FGE * 12,
                                Number(item.data[0].data[2]) * maps[0].FGE * 12,
                                Number(item.data[0].data[3]) * maps[0].FGE * 12
                            ]
                    },
                    {
                        key: '116/121',
                        data:
                            [
                                Number(item.data[1].data[0]) * maps[1].FGE * 12,
                                Number(item.data[1].data[1]) * maps[1].FGE * 12,
                                Number(item.data[1].data[2]) * maps[1].FGE * 12,
                                Number(item.data[1].data[3]) * maps[1].FGE * 12
                            ]
                    },
                    {
                        key: '103',
                        data:
                            [
                                Number(item.data[2].data[0]) * maps[3].FGE * 12,
                                Number(item.data[2].data[1]) * maps[3].FGE * 12,
                                Number(item.data[2].data[2]) * maps[3].FGE * 12,
                                Number(item.data[2].data[3]) * maps[3].FGE * 12
                            ]
                    },
                    {
                        key: '81',
                        data:
                            [
                                Number(item.data[3].data[0]) * maps[4].FGE * 12,
                                Number(item.data[3].data[1]) * maps[4].FGE * 12,
                                Number(item.data[3].data[2]) * maps[4].FGE * 12,
                                Number(item.data[3].data[3]) * maps[4].FGE * 12
                            ]
                    }
                ]
            });
        }

        for (item of ValuesC) {
            //var num = Number(item.data[0].data[1]);

            capacity_value_c.push({
                y: item.y,
                data: [
                    {
                        key: '152',
                        data:
                            [
                                Number(item.data[0].data[0]) * maps[0].FGE * 12,
                                Number(item.data[0].data[1]) * maps[0].FGE * 12,
                                Number(item.data[0].data[2]) * maps[0].FGE * 12,
                                Number(item.data[0].data[3]) * maps[0].FGE * 12
                            ]
                    },
                    {
                        key: '116/121',
                        data:
                            [
                                Number(item.data[1].data[0]) * maps[1].FGE * 12,
                                Number(item.data[1].data[1]) * maps[1].FGE * 12,
                                Number(item.data[1].data[2]) * maps[1].FGE * 12,
                                Number(item.data[1].data[3]) * maps[1].FGE * 12
                            ]
                    },
                    {
                        key: '103',
                        data:
                            [
                                Number(item.data[2].data[0]) * maps[3].FGE * 12,
                                Number(item.data[2].data[1]) * maps[3].FGE * 12,
                                Number(item.data[2].data[2]) * maps[3].FGE * 12,
                                Number(item.data[2].data[3]) * maps[3].FGE * 12
                            ]
                    },
                    {
                        key: '81',
                        data:
                            [
                                Number(item.data[3].data[0]) * maps[4].FGE * 12,
                                Number(item.data[3].data[1]) * maps[4].FGE * 12,
                                Number(item.data[3].data[2]) * maps[4].FGE * 12,
                                Number(item.data[3].data[3]) * maps[4].FGE * 12
                            ]
                    }
                ]
            });
        }

        for (item of ValuesD) {
            //var num = Number(item.data[0].data[1]);

            capacity_value_d.push({
                y: item.y,
                data: [
                    {
                        key: '152',
                        data:
                            [
                                Number(item.data[0].data[0]) * maps[0].FGE * 12,
                                Number(item.data[0].data[1]) * maps[0].FGE * 12,
                                Number(item.data[0].data[2]) * maps[0].FGE * 12,
                                Number(item.data[0].data[3]) * maps[0].FGE * 12
                            ]
                    },
                    {
                        key: '116/121',
                        data:
                            [
                                Number(item.data[1].data[0]) * maps[1].FGE * 12,
                                Number(item.data[1].data[1]) * maps[1].FGE * 12,
                                Number(item.data[1].data[2]) * maps[1].FGE * 12,
                                Number(item.data[1].data[3]) * maps[1].FGE * 12
                            ]
                    },
                    {
                        key: '103',
                        data:
                            [
                                Number(item.data[2].data[0]) * maps[3].FGE * 12,
                                Number(item.data[2].data[1]) * maps[3].FGE * 12,
                                Number(item.data[2].data[2]) * maps[3].FGE * 12,
                                Number(item.data[2].data[3]) * maps[3].FGE * 12
                            ]
                    },
                    {
                        key: '81',
                        data:
                            [
                                Number(item.data[3].data[0]) * maps[4].FGE * 12,
                                Number(item.data[3].data[1]) * maps[4].FGE * 12,
                                Number(item.data[3].data[2]) * maps[4].FGE * 12,
                                Number(item.data[3].data[3]) * maps[4].FGE * 12
                            ]
                    }
                ]
            });
        }

        for (item of ValuesE) {
            //var num = Number(item.data[0].data[1]);

            capacity_value_e.push({
                y: item.y,
                data: [
                    {
                        key: '152',
                        data:
                            [
                                Number(item.data[0].data[0]) * maps[0].FGE * 12,
                                Number(item.data[0].data[1]) * maps[0].FGE * 12,
                                Number(item.data[0].data[2]) * maps[0].FGE * 12,
                                Number(item.data[0].data[3]) * maps[0].FGE * 12
                            ]
                    },
                    {
                        key: '116/121',
                        data:
                            [
                                Number(item.data[1].data[0]) * maps[1].FGE * 12,
                                Number(item.data[1].data[1]) * maps[1].FGE * 12,
                                Number(item.data[1].data[2]) * maps[1].FGE * 12,
                                Number(item.data[1].data[3]) * maps[1].FGE * 12
                            ]
                    },
                    {
                        key: '103',
                        data:
                            [
                                Number(item.data[2].data[0]) * maps[3].FGE * 12,
                                Number(item.data[2].data[1]) * maps[3].FGE * 12,
                                Number(item.data[2].data[2]) * maps[3].FGE * 12,
                                Number(item.data[2].data[3]) * maps[3].FGE * 12
                            ]
                    },
                    {
                        key: '81',
                        data:
                            [
                                Number(item.data[3].data[0]) * maps[4].FGE * 12,
                                Number(item.data[3].data[1]) * maps[4].FGE * 12,
                                Number(item.data[3].data[2]) * maps[4].FGE * 12,
                                Number(item.data[3].data[3]) * maps[4].FGE * 12
                            ]
                    }
                ]
            });
        }

        for (item of ValuesF) {
            //var num = Number(item.data[0].data[1]);

            capacity_value_f.push({
                y: item.y,
                data: [
                    {
                        key: '152',
                        data:
                            [
                                Number(item.data[0].data[0]) * maps[0].FGE * 12,
                                Number(item.data[0].data[1]) * maps[0].FGE * 12,
                                Number(item.data[0].data[2]) * maps[0].FGE * 12,
                                Number(item.data[0].data[3]) * maps[0].FGE * 12
                            ]
                    },
                    {
                        key: '116/121',
                        data:
                            [
                                Number(item.data[1].data[0]) * maps[1].FGE * 12,
                                Number(item.data[1].data[1]) * maps[1].FGE * 12,
                                Number(item.data[1].data[2]) * maps[1].FGE * 12,
                                Number(item.data[1].data[3]) * maps[1].FGE * 12
                            ]
                    },
                    {
                        key: '103',
                        data:
                            [
                                Number(item.data[2].data[0]) * maps[3].FGE * 12,
                                Number(item.data[2].data[1]) * maps[3].FGE * 12,
                                Number(item.data[2].data[2]) * maps[3].FGE * 12,
                                Number(item.data[2].data[3]) * maps[3].FGE * 12
                            ]
                    },
                    {
                        key: '81',
                        data:
                            [
                                Number(item.data[3].data[0]) * maps[4].FGE * 12,
                                Number(item.data[3].data[1]) * maps[4].FGE * 12,
                                Number(item.data[3].data[2]) * maps[4].FGE * 12,
                                Number(item.data[3].data[3]) * maps[4].FGE * 12
                            ]
                    }
                ]
            });
        }

        var Values = [
            { index: 0, key: '(a) Hot Tanks', data: capacity_value_a },
            { index: 1, key: '(b) Rebuild/Start-up DT', data: capacity_value_b },
            { index: 2, key: '(a) Operating Tanks', data: capacity_value_c },
            { index: 3, key: '(b) Ready to Light + Hot soak', data: capacity_value_d },
            { index: 4, key: '(c) Not available - waiting for rebuild without capital', data: capacity_value_e },
            { index: 5, key: '(d) Not avilable - Cold', data: capacity_value_f }
        ];

        for (var x = 2; x < Categorys.length; x++) {
            for (var i = 2024; i <= 2027; i++) {
                for (var j = 0; j < site.length; j++) {
                    for (var m = 0; m < Subcategorys.length; m++) {


                        if (Categorys[x] == '(a) Operating Tanks') {
                            var filterData = Values.find(c => c.key == '(a) Hot Tanks');
                            var yearData = filterData.data.find(c => c.y == i);
                            var data = yearData.data.find(c => c.key == Subcategorys[m]);

                            var value = data.data[j];
                            var temp = {
                                year: i,
                                Category: Categorys[x],
                                Subcategory: Subcategorys[m],
                                Value: value,
                                site: site[j],
                                Category_1: 'Hot Tanks'
                            };
                            list.push(temp);

                            //----------------------------------------------
                            filterData = Values.find(c => c.key == '(b) Rebuild/Start-up DT');
                            yearData = filterData.data.find(c => c.y == i);
                            data = yearData.data.find(c => c.key == Subcategorys[m]);

                            value = data.data[j];
                            var temp2 = {
                                year: i,
                                Category: Categorys[x],
                                Subcategory: Subcategorys[m],
                                Value: value,
                                site: site[j],
                                Category_1: 'Rebuild/Start-up DT'
                            };
                            list.push(temp2);

                        } else {

                            var filterData = Values.find(c => c.key == Categorys[x]);
                            var yearData = filterData.data.find(c => c.y == i);
                            var data = yearData.data.find(c => c.key == Subcategorys[m]);

                            var value = data.data[j];
                            var temp = {
                                year: i,
                                Category: Categorys[x],
                                Subcategory: Subcategorys[m],
                                Value: value,
                                site: site[j],
                                Category_1: 'Isopipe'
                            };
                            list.push(temp);
                        }
                    }

                }
            }
        }


        var index = 0;
        dxPivotGrid2 = $('#pivotGridContainer').dxPivotGrid({
            allowSortingBySummary: true,
            allowSorting: true,
            allowFiltering: true,
            allowExpandAll: true,
            //width: 1000,
            showBorders: true,
            showColumnGrandTotals: false,
            showRowGrandTotals: true,
            texts: {
                grandTotal: "Total (A+B+C+D)"
            },
            fieldChooser: {
                enabled: false,
            },
            onContentReady() {
                var data_cells = $('#pivotGridContainer').find('.dx-area-data-cell').find('table')
                    .find('colgroup').find('col');
                var cate_cells = $('#pivotGridContainer').find('.dx-area-row-cell').find('table')
                    .find('colgroup').find('col');

                var cate_table_width = 0;
                if (cate_cells.length == 2) {
                    cate_table_width = 220;
                } else if (cate_cells.length == 3) {
                    cate_table_width = 340;
                }
                if (data_cells.length < 5) {
                    dxPivotGrid2.option('width', 750 + cate_table_width);
                } else if (data_cells.length < 10) {
                    dxPivotGrid2.option('width', 950 + cate_table_width);
                } else if (data_cells.length < 15) {
                    dxPivotGrid2.option('width', 1150 + cate_table_width);
                } else if (data_cells.length < 20) {
                    dxPivotGrid2.option('width', 1350 + cate_table_width > 1550 ? 1550 : 1350 + cate_table_width);
                } else {
                    dxPivotGrid2.option('width', 1550);
                }


                $('#pivotGridContainer').find('.custom-add-row').remove();
                $('#pivotGridContainer').find('.dx-area-description-cell')
                    .find('.dx-pivotgrid-toolbar')
                    .css('line-height', '32px')
                    .text('Category').css('font-weight', 'bold');
                var headerRow = $('#pivotGridContainer').find('.dx-area-description-cell')
                    .parent().clone();

                $(headerRow)
                    .addClass('custom-add-row')
                    .find('.dx-pivotgrid-toolbar')
                    .css('line-height', '36px')
                    .text('FGE (Mft2)');
                $(headerRow).find('.dx-area-column-cell')
                    .html('Asset Capacity')
                    .css('line-height', '36px')
                    .css('background-color', '#003466')
                    .css('color', '#fff')
                    .css('font-weight', 'bold')
                    .css('text-align', 'center');
                $(headerRow).insertBefore($('#pivotGridContainer').find('.dx-area-description-cell').parent());

                //var arr = [
                //    { key: '(a) Hot Tanks', index: -1 },
                //    { key: '(b) Rebuild/Start-up DT', index: -1 },
                //    { key: '(c) Operating Tanks', index: -1 }
                //];
                //var notBold = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT', '(a) Hot Tanks Total', '(b) Rebuild/Start-up DT Total'];

                var leftRows = $('#pivotGridContainer').find('.dx-pivotgrid-vertical-headers tbody').find('tr');

                for (var i = 0; i < leftRows.length; i++) {
                    var row = leftRows[i];
                    var cell = $(row).find('td').eq(0);
                    var rowspan = $(cell).attr('rowspan');

                    var text = $(cell).text();
                    //var item = arr.find(c => c.key == text);
                    //if (item) {
                    //    if (rowspan) {
                    //        item.index = i + 4;
                    //    } else {
                    //        item.index = i;
                    //    }
                    //}

                    if (rowspan) {
                        i = i + parseInt(rowspan) - 1;
                    }
                    //if (!(notBold.find(c => c == text))) {
                    //    $(cell).css('font-weight', 'bold');//.css('color', 'rgb(18 105 219)')
                    //}
                }

                var rows = $('#pivotGridContainer').find('.dx-area-data-cell').find('tbody').find('tr');


                var textRightRow = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];

                //for (var i = 0; i < rows.length; i++) {
                //    var lastCol = $(rows[i]).find('td').last();
                //    $(lastCol).hide();
                //}

                //var colgroup = $('.dx-area-data-cell').find('colgroup');
                //$(colgroup).find('col').last().hide();
                //$('.dx-area-column-cell').find('table').find('colgroup').find('col').last().hide();
                //var headerRows = $('.dx-area-column-cell').find('table').find('thead').find('tr');
                //for (var i = 0; i < 1; i++) {
                //    $(headerRows[i]).find('td').last().hide();
                //}
                var grayLines = Values.filter(c => c.index > 1);
                $(leftRows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
                $(rows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
                for (var i = 0; i < leftRows.length; i++) {
                    var leftRow = leftRows[i];
                    var cell = $(leftRow).find('td').eq(0);
                    var rowspan = $(cell).attr('rowspan');

                    var text = $(cell).text().replace(' Total', '');

                    if (textRightRow.findIndex(c => c == text) > -1) {
                        $(cell).find('span').css('float', 'right');
                    }

                    //if (grayLines.findIndex(c => c.key == text) > -1) {
                    //    $(leftRow).addClass('bg-light-gray');
                    //    $(rows[i]).addClass('bg-light-gray');

                    //    if (rowspan && parseInt(rowspan) > 0) {
                    //        rowspan = parseInt(rowspan);
                    //        for (var j = 1; j < rowspan; j++) {
                    //            leftRow = $(leftRow).next();
                    //            $(leftRow).addClass('bg-light-gray');

                    //            $(rows[i + j]).addClass('bg-light-gray');
                    //        }
                    //    }
                    //}
                }

                setTimeout(function () {
                    addBorder('pivotGridContainer');
                }, 100);



                //var row_a = rows[arr[0].index];
                //var row_b = rows[arr[1].index];
                //var row_c = rows[arr[2].index];
                //var row_last = rows[rows.length - 1];
                //var cols_c = $(row_c).find('td');
                //var cols_a = $(row_a).find('td');
                //var cols_b = $(row_b).find('td');
                //var cols_total = $(row_last).find('td');
                //for (var i = 0; i < cols_c.length; i++) {
                //    //var cell_a = $(cols_a[i]).text();
                //    //var cell_b = $(cols_b[i]).text();
                //    //var value = (Number(cell_a) * 100 + Number(cell_b) * 100) / 100;
                //    //var value = Number(value.toFixed(2));
                //    //$(cols_c[i]).find('span').text(value);
                //    var cell_c = $(cols_c[i]).text();
                //    var total = $(cols_total[i]).text();
                //    var value = (Number(total) * 100 - Number(cell_c) * 100) / 100;
                //    value = Number(value.toFixed(2));
                //    $(cols_total[i]).find('span').text(value);
                //}


                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    $(row).find('td').css('font-weight', 'bold');
                }
                //debugger
                for (var i = 0; i < leftRows.length; i++) {
                    var row = leftRows[i];
                    $(row).find('td').css('font-weight', 'bold');
                    //var td = $(row).find('td').eq(0);
                    //var rowspan = $(td).attr('rowspan');

                    //if (rowspan) {
                    //    i = i + parseInt(rowspan);
                    //} else {
                    //    row = rows[i];
                    //    $(row).find('td').css('font-weight', 'bold');
                    //}
                }

                clearInterval();
                $('#pivotGridContainer')
                    .find('.dx-area-data-cell')
                    .find('.dx-scrollable-content')
                    .css('margin-bottom', '10px');
                setInterval(function () {
                    $('#pivotGridContainer')
                        .find('.dx-area-data-cell')
                        .find('.dx-scrollable-scrollbar')
                        .eq(0)
                        .addClass('dx-state-hover')
                        .find('.dx-scrollable-scroll')
                        .removeClass('dx-state-invisible');
                }, 500);
            },
            dataSource: {
                fields: [{
                    caption: 'Category',
                    width: 250,
                    dataField: 'Category',
                    area: 'row',
                    sortingMethod: function (a, b) {
                        var displayTexts = ['Hot Tanks (a)', 'Rebuild/Start-up DT (b)', 'Operating Tanks (c=a+b)', 'Ready to Light + Hot soak (d)'];
                        var values = [1, 2, 3, 4, 5];

                        var index1 = displayTexts.findIndex(c => c == a.value);
                        var index2 = displayTexts.findIndex(c => c == b.value);

                        var value1 = values[index1];
                        var value2 = values[index2];
                        /*var fieldSortOrder = this.sortOrder;*/
                        if (value1 < value2) {
                            return 1;
                        } else if (value1 > value2) {
                            return 2;
                        } else {
                            return 0;
                        }
                    },
                }, {
                    caption: 'Category_1',
                    dataField: 'Category_1',
                    width: 220,
                    area: 'row',
                }, {
                    caption: 'Subcategory',
                    dataField: 'Subcategory',
                    width: 90,
                    area: 'row',
                    sortBy: 'value',
                    sortingMethod: function (a, b) {
                        var temps = [
                            { displayText: '152', value: 1 },
                            { displayText: '116/121', value: 2 },
                            { displayText: '103', value: 3 },
                            { displayText: '81', value: 4 }
                        ];

                        var value1 = temps.find(c => c.displayText == a.value).value;
                        var value2 = temps.find(c => c.displayText == b.value).value;
                        /*var fieldSortOrder = this.sortOrder;*/
                        if (value1 < value2) {
                            return 1;
                        } else if (value1 > value2) {
                            return 2;
                        } else {
                            return 0;
                        }
                    },
                    selector(data) {
                        return data.Subcategory;
                    },
                }, {
                    dataField: 'year',
                    area: 'column',
                    expanded: true,
                }, {
                    dataField: 'site',
                    area: 'column',
                    sortingMethod: function (a, b) {
                        var temps = [
                            { displayText: 'CN', value: 1 },
                            { displayText: 'TW', value: 2 },
                            { displayText: 'CPM', value: 3 },
                            { displayText: 'JP', value: 4 }
                        ];

                        var value1 = temps.find(c => c.displayText == a.value).value;
                        var value2 = temps.find(c => c.displayText == b.value).value;
                        /*var fieldSortOrder = this.sortOrder;*/
                        if (value1 < value2) {
                            return 1;
                        } else if (value1 > value2) {
                            return 2;
                        } else {
                            return 0;
                        }
                    },
                }, {
                    caption: 'Value',
                    dataField: 'Value',
                    //showTotals: true,
                    showGrandTotals: true,
                    dataType: 'number',
                    summaryType: 'sum',
                    //summaryType: 'custom',
                    //calculateCustomSummary: function (options) {
                    //    debugger
                    //    switch (options.summaryProcess) {
                    //        case "start":
                    //            // Initializing "totalValue" here
                    //            break;
                    //        case "calculate": options.totalValue = Math.round(options.value);
                    //            break;
                    //        case "finalize":
                    //            // Assigning the final value to "totalValue" here
                    //            break;
                    //    }
                    //},
                    format: {
                        type: "fixedPoint",
                        precision: 0
                    },
                    area: 'data',
                }],
                store: list,
            },
        }).dxPivotGrid('instance');
    })

    Highcharts.chart('chart-container-1', {
        chart: {
            type: 'area'
        },
        title: {
            text: '',
            align: 'left'
        },
        legend: {
            enabled: false
        },
        //subtitle: {
        //    text: 'Source: ' +
        //        '<a href="https://www.ssb.no/en/statbank/table/09288/"' +
        //        'target="_blank">SSB</a>',
        //    align: 'left'
        //},
        yAxis: {
            title: {
                //useHTML: true,
                //text: 'Million tonnes CO<sub>2</sub>-equivalents'
            },
            type: 'value',
            tickInterval: 10, //间
            max: 120,
            min: 0,
            labels: { style: { 'fontSize': '16px' } }
        },
        tooltip: {
            shared: true,
            headerFormat: '<span style="font-size:12px"><b>{point.key}</b></span>' +
                '<br>'
        },
        xAxis: {
            categories: ['Q4\'23', 'Jan\'24', 'Feb\'24', 'Mar\'24', 'Q2\'24', 'Q3\'24', 'Q4\'24', 'Q1\'25', 'Q2\'25', '26', '27'],
            crosshair: true, // 启用 x 轴准星线
            labels: { style: { 'fontSize': '16px' } }
        },
        tooltip: {
            enabled: false,
            animation: false,
        },
        plotOptions: {
            //series: {
            //    pointStart: 2012
            //},
            line: {
                dataLabels: { enabled: true, style: { 'fontSize': '16px' } }
            },
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    enabled: false,
                    lineWidth: 1,
                    states: {
                        hover: {
                            enabled: false
                        }
                    },
                    lineColor: '#666666'
                }
            }
        },
        series: [{
            name: 'hunting',
            color: '#ffffcc',
            data: [36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36]
        }, {
            name: 'Ocean transport',
            color: '#c3d69b',
            data: [43, 43, 43, 43, 43, 43, 43, 43, 43, 43, 43]
        }, {
            name: 'Households',
            color: '#ffffcc',
            data: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18]

        }, {
            name: 'Agriculture and hunting',
            color: '#ff7f7f',
            data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23]

        }, {
            name: 'Value',
            data: [98, 99, 104, 97, 89, 78, 77, 66, 64, 58, 44],
            zIndex: 1,
            type: 'line',
            dataLabels: {
                enabled: true
            },
            marker: {
                fillColor: 'white',
                symbol: 'circle',
                lineWidth: 2,
                enabled: true,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }]
    });

</script>

标签：透视,Number,item,key,var,data,find
From： https://www.cnblogs.com/duixue/p/18345181

相关文章

  • 数据透视表（三）
    文章目录行汇总百分比与降序排列筛选的应用排序的应用与自定义排序批量生成透视子表1、把数据放入报表筛选的字段2、根据自定义的功能名称批量生成透视的子表认识切片器如何链接切片器与报表数据透视表布局数据透视表打印行汇总百分比与降序排列双击鼠标点击单元格......
  • 如何向 python pandas 数据透视表添加过滤器？ (pd.read_excel)
    我正在尝试使用pandas库在python中重新创建我在Excel中制作的数据透视表。我试图用时间段作为过滤器来总结超过500k行的OD总行程数据。在Excel上，我只会执行行（O）、列（D）、值（行程）、过滤器（时间）。到目前为止，在python上我只有索引、列、值、aggfunc，但我不知道如何过滤。有......
  • 轻松透视财务数据：免费工具助力公司打造财务报表可视化看板
    面对海量的财务数据，如何快速、准确地提炼出有价值的信息，并以直观易懂的方式呈现给管理层及利益相关者，成为了每一家企业面临的重大挑战。 传统财务报表编制过程繁琐，不仅耗时耗力，还容易出错。而一些可视化工具，具有强大的数据处理能力，足以改变这一现状。例如，山海鲸可视化支持一键......
  • 图像透视变换技术
    文章目录概要技术原理实现步骤总结透视变换矩阵的通用性小结概要图像透视变换（PerspectiveTransformation）是计算机视觉中一种重要的图像变换方法，它可以将图像从一个视角投影到另一个视角，从而改变图像的几何形状。透视变换常用于矫正图像的透视失真、图像配准、生成......
  • PySpark 逆透视或减少
    我有以下数据框：df=spark.createDataFrame([("D1","D2","H1",None,None),("D1","D2","H1","H2",None),("D1","D2","H1",&qu......
  • Python - 逆透视数据框
    我有一个按日期时间索引的表，每个日期时间都有多个层（中心和交货间隔）：日期时间中心交货间隔结算点价格2024-01-0101:00:00休斯顿中心1......
  • MySQL入门学习-SQL高级技巧.透视表
        在MySQL中，虽然没有直接提供像Excel中那样的透视表功能，但可以通过一些技巧来实现类似的效果。通常，我们可以使用聚合函数和'GROUPBY' 子句来创建数据的透视表。一、透视表的概念：    透视表是一种数据汇总和分析的工具，它可以将数据按照不同的维度进行......
  • 躲过了地沟油，还是没躲过工业油 —— 一车混装油“投毒”10万人！透视4000万吨食用油产业
    原文地址：https://baijiahao.baidu.com/s?id=1804095661359226790&wfr=spider&for=pc截取重点内容：值得注意的是，此次事件“国家队”中储粮和600亿民营粮油巨头汇福粮油牵扯其中。公开资料显示，中储粮旗下的食用油品牌包括金鼎、鼎皇、华鼎、汉鼎、淳口香和聚味美等。汇福粮油有......
  • 数据分析师技术和必备知识汇总-----Excle-----数据透视表
    主文章：数据分析师技术和必备知识汇总-----Excle-----持续更新，https://blog.csdn.net/grd_java/article/details/140174090文章目录1.基础2.常用功能2.1报表布局2.2更改计算方式和排序2.3数据安全2.4计算字段的使用2.5切片器1.基础创建方法下图是某公司......
  • 数据分析中如何理解透视表
            透视表（PivotTable）是数据分析中一种非常强大的工具，用于快速汇总、分析、探索和展示数据。透视表可以根据数据的不同维度和指标进行重组和计算，帮助用户从大量数据中提取有用的信息和发现数据中的模式和趋势。透视表的基本概念行标签（RowLabels）：数据透视表中的......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99