将表格从AnyChart转换为Google Charts?

时间:2018-07-05 18:38:14

标签: google-visualization anychart

有人将图表从AnyChart转换为Google图表吗?我正在尝试在Grails项目中转换表。

我可以使表格看起来很好,并带有一些硬编码的日期,但是我无法显示数据数组。两者之间的数据概念似乎完全不可比。

在AnyChart中,我可以执行此操作,然后将数据添加到表中。

 var tableData = [
                [null],
                ["Cheapest"],
                ["Highest"],
                ["Average"],
                ["Median"],
                ["Options"],
                ["Avg/50"],
                ["Stops [stops:total]"],
                ["Cheapest/Stops"],
                ["Star Profile Totals"],
                ["Cheapest Star Profiles"],
                ["GDS ID Totals"],
                ["Cheapest/GDS ID"],
                ["DynamicPrice Totals"],
                ["PRV Pricing Totals"],
                ["PUB Pricing Totals"],
                ["Cheapest/PricingType"],
                ["Contract Type Totals"],
                ["Cheapest/Contract"],
                ["CabinType Totals"],
                ["Cheapest/CabinType"],
                ["Arrival Port Totals"],
                ["Departure Port Totals"],
                ["Carrier Totals"],
                ["Cheapest/Carrier"],
                ["Avg Commission/Profile"],
                ["Itins w/Dyn Discount"],
                ["Opaque Totals"],
                ["Cheapest/Opaque"],
                ["Searched Contracts"]
            ];

            var url1 = "${apiInstanceList[-1].serverName}";
            var url2 = "${apiInstanceList[-2].serverName2}";

            // now set up the data for the table
            tableData.forEach(function(d){
                <g:each in="${apiInstanceList.size() >= 2 ? apiInstanceList[-2..-1] : apiInstanceList}" var="apiInstance">
                if (d[0] == null){
                    var url = url1;
                    d.push(d[1] == url ? url2 : url);
                }else if(d[0] === "Cheapest" && ${apiInstance.cheapestPrice}){
                    d.push("$"+${apiInstance.cheapestPrice});
                } else if (d[0] === "Highest") {
                    d.push("$"+${apiInstance.highestPrice});
                } else if (d[0] === "Average"){
                    d.push("$"+${apiInstance.averagePrice});
                } else if (d[0] === "Median"){
                    d.push("$"+${apiInstance.medianPrice});
                } else if (d[0] === "Options"){
                    d.push(${apiInstance.totalOptions});
                } else if (d[0] === "Avg/50") {
                    d.push("$"+${apiInstance.avg50});
                } else if (d[0] === "Stops [stops:total]") {
                    var aoo = "${apiInstance.numberOfStops}";
                    d.push(aoo);
                } else if (d[0] === "Star Profile Totals") {
                    var boo = "${apiInstance.profileNumbers}";
                    d.push(boo);
                } else if (d[0] === "Cheapest/CabinType") {
                    var coo = "${apiInstance.cheapestByCabin}";
                    d.push(coo);
                } else if (d[0] === "Contract Type Totals") {
                    var doo = "${apiInstance.contractTypeNumbers}";
                    d.push(doo);
                } else if (d[0] === "DynamicPrice Totals") {
                    var eoo = "${apiInstance.dynamicNumbers}";
                    d.push(eoo);
                } else if (d[0] === "PRV Pricing Totals") {
                    var foo = "${apiInstance.privatePricingTypeNumbers}";
                    d.push(foo);
                } else if (d[0] === "PUB Pricing Totals") {
                    var goo = "${apiInstance.publicPricingTypeNumbers}";
                    d.push(goo);
                } else if (d[0] === "Cheapest/PricingType") {
                    var ioo = "${apiInstance.cheapestByPassengerType}";
                    d.push(ioo);
                } else if (d[0] === "CabinType Totals") {
                    var hoo = "${apiInstance.cabinNumbers}";
                    d.push(hoo);
                }  else if (d[0] === "Cheapest/Contract") {
                    var koo = "${apiInstance.cheapestByContractType}";
                    d.push(koo);
                } else if (d[0] === "Arrival Port Totals") {
                    var loo = "${apiInstance.arrivalAirportTotals}";
                    d.push(loo);
                } else if (d[0] === "Departure Port Totals") {
                    var moo = "${apiInstance.departureAirportTotals}";
                    d.push(moo);
                } else if (d[0] === "Carrier Totals") {
                    var soo = "${apiInstance.carrierNumbers}";
                    d.push(soo);
                } else if (d[0] === "Cheapest/Carrier") {
                    var too = "${apiInstance.cheapestByCarrier}";
                    d.push(too);
                } else if (d[0] === "Cheapest Star Profiles") {
                    var noo = "${apiInstance.cheapestByProfileId}";
                    d.push(noo);
                } else if (d[0] === "Cheapest/Stops") {
                    var ooo = "${apiInstance.cheapestByStops}";
                    d.push(ooo);
                } else if (d[0] === "GDS ID Totals") {
                    var poo = "${apiInstance.gdsIdNumbers}";
                    d.push(poo);
                } else if (d[0] === "Cheapest/GDS ID") {
                    var qoo = "${apiInstance.cheapestByGdsID}";
                    d.push(qoo);
                } else if (d[0] === "Avg Commission/Profile") {
                    var roo = "${apiInstance.averageCommissionByStarProfileId}";
                    d.push(roo);
                } else if (d[0] === "Itins w/Dyn Discount") {
                    var too = "${apiInstance.dynamicDiscountTotal}";
                    d.push(too)
                } else if (d[0] === "Opaque Totals") {
                    var uoo = "${apiInstance.opaqueTotals}";
                    d.push(uoo)
                } else if (d[0] === "Cheapest/Opaque") {
                    var voo = "${apiInstance.cheapestByOpaqueType}";
                    d.push(voo)
                } else if (d[0] === "Searched Contracts") {
                    var soo = "${apiInstance.searchedContracts}";
                    d.push(soo);
                }
                </g:each>
            });

但是Google图表不同。硬编码看起来像这样:

 var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

代码如下:

 <script type="text/javascript">
             google.charts.load('current', {'packages':['table']});
             google.charts.setOnLoadCallback(drawTable);

             function drawTable() {
                 //var data = new google.visualization.DataTable();
                 var tableData2 = new google.visualization.DataTable();
                 //data.addColumn('string', 'Name');
                 //data.addColumn('number', 'Salary');
                 //data.addColumn('boolean', 'Full Time Employee');
                 //data.addRows([
                 //    ['Mike',  {v: 10000, f: '$10,000'}, true],
                 //    ['Jim',   {v:8000,   f: '$8,000'},  false],
                 //    ['Alice', {v: 12500, f: '$12,500'}, true],
                 //    ['Bob',   {v: 7000,  f: '$7,000'},  true]
                 //]);

                 tableData2 = [
                     [null],
                     ["Cheapest"],
                     ["Highest"],
                     ["Average"],
                     ["Median"],
                     ["Options"],
                     ["Avg/50"],
                     ["Stops [stops:total]"],
                     ["Cheapest/Stops"],
                     ["Star Profile Totals"],
                     ["Cheapest Star Profiles"],
                     ["GDS ID Totals"],
                     ["Cheapest/GDS ID"],
                     ["DynamicPrice Totals"],
                     ["PRV Pricing Totals"],
                     ["PUB Pricing Totals"],
                     ["Cheapest/PricingType"],
                     ["Contract Type Totals"],
                     ["Cheapest/Contract"],
                     ["CabinType Totals"],
                     ["Cheapest/CabinType"],
                     ["Arrival Port Totals"],
                     ["Departure Port Totals"],
                     ["Carrier Totals"],
                     ["Cheapest/Carrier"],
                     ["Avg Commission/Profile"],
                     ["Itins w/Dyn Discount"],
                     ["Opaque Totals"],
                     ["Cheapest/Opaque"],
                     ["Searched Contracts"]
                 ];
                 var url1 = "${apiInstanceList[-1].serverName}";
                 var url2 = "${apiInstanceList[-2].serverName2}";
                 // now set up the data for the table
                 tableData2.forEach(function(d){
                     <g:each in="${apiInstanceList.size() >= 2 ? apiInstanceList[-2..-1] : apiInstanceList}" var="apiInstance">
                     if (d[0] == null){
                         var url = url1;
                         d.push(d[1] == url ? url2 : url);
                     }else if(d[0] === "Cheapest" && ${apiInstance.cheapestPrice}){
                         d.push("$"+${apiInstance.cheapestPrice});
                     } else if (d[0] === "Highest") {
                         d.push("$"+${apiInstance.highestPrice});
                     } else if (d[0] === "Average"){
                         d.push("$"+${apiInstance.averagePrice});
                     } else if (d[0] === "Median"){
                         d.push("$"+${apiInstance.medianPrice});
                     } else if (d[0] === "Options"){
                         d.push(${apiInstance.totalOptions});
                     } else if (d[0] === "Avg/50") {
                         d.push("$"+${apiInstance.avg50});
                     } else if (d[0] === "Stops [stops:total]") {
                         var aoo = "${apiInstance.numberOfStops}";
                         d.push(aoo);
                     } else if (d[0] === "Star Profile Totals") {
                         var boo = "${apiInstance.profileNumbers}";
                         d.push(boo);
                     } else if (d[0] === "Cheapest/CabinType") {
                         var coo = "${apiInstance.cheapestByCabin}";
                         d.push(coo);
                     } else if (d[0] === "Contract Type Totals") {
                         var doo = "${apiInstance.contractTypeNumbers}";
                         d.push(doo);
                     } else if (d[0] === "DynamicPrice Totals") {
                         var eoo = "${apiInstance.dynamicNumbers}";
                         d.push(eoo);
                     } else if (d[0] === "PRV Pricing Totals") {
                         var foo = "${apiInstance.privatePricingTypeNumbers}";
                         d.push(foo);
                     } else if (d[0] === "PUB Pricing Totals") {
                         var goo = "${apiInstance.publicPricingTypeNumbers}";
                         d.push(goo);
                     } else if (d[0] === "Cheapest/PricingType") {
                         var ioo = "${apiInstance.cheapestByPassengerType}";
                         d.push(ioo);
                     } else if (d[0] === "CabinType Totals") {
                         var hoo = "${apiInstance.cabinNumbers}";
                         d.push(hoo);
                     }  else if (d[0] === "Cheapest/Contract") {
                         var koo = "${apiInstance.cheapestByContractType}";
                         d.push(koo);
                     } else if (d[0] === "Arrival Port Totals") {
                         var loo = "${apiInstance.arrivalAirportTotals}";
                         d.push(loo);
                     } else if (d[0] === "Departure Port Totals") {
                         var moo = "${apiInstance.departureAirportTotals}";
                         d.push(moo);
                     } else if (d[0] === "Carrier Totals") {
                         var soo = "${apiInstance.carrierNumbers}";
                         d.push(soo);
                     } else if (d[0] === "Cheapest/Carrier") {
                         var too = "${apiInstance.cheapestByCarrier}";
                         d.push(too);
                     } else if (d[0] === "Cheapest Star Profiles") {
                         var noo = "${apiInstance.cheapestByProfileId}";
                         d.push(noo);
                     } else if (d[0] === "Cheapest/Stops") {
                         var ooo = "${apiInstance.cheapestByStops}";
                         d.push(ooo);
                     } else if (d[0] === "GDS ID Totals") {
                         var poo = "${apiInstance.gdsIdNumbers}";
                         d.push(poo);
                     } else if (d[0] === "Cheapest/GDS ID") {
                         var qoo = "${apiInstance.cheapestByGdsID}";
                         d.push(qoo);
                     } else if (d[0] === "Avg Commission/Profile") {
                         var roo = "${apiInstance.averageCommissionByStarProfileId}";
                         d.push(roo);
                     } else if (d[0] === "Itins w/Dyn Discount") {
                         var too = "${apiInstance.dynamicDiscountTotal}";
                         d.push(too)
                     } else if (d[0] === "Opaque Totals") {
                         var uoo = "${apiInstance.opaqueTotals}";
                         d.push(uoo)
                     } else if (d[0] === "Cheapest/Opaque") {
                         var voo = "${apiInstance.cheapestByOpaqueType}";
                         d.push(voo)
                     } else if (d[0] === "Searched Contracts") {
                         var soo = "${apiInstance.searchedContracts}";
                         d.push(soo);
                     }
                     </g:each>
                 });

                 //var table = new google.visualization.Table(document.getElementById('container3'));
                 //table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
                 var table = new google.visualization.Table(document.getElementById('container3'));
                 var data2 = google.visualization.arrayToDataTable(tableData2);
                 table.draw(data2, {showRowNumber: true, width: '100%', height: '100%'});
             }
    </script>
    <div id="container3" style="width: 1350px; height: 1400px;"></div>

我不确定如何将其转换为Google图表。任何帮助深表感谢。

0 个答案:

没有答案