Первый пример
Я использую apexcharts.js для построения Диаграммы площадей в qliksense Mashups, и я создал гиперкуб, а также могу печатать данные в консоли.
/* * Bootstrap-based responsive mashup * @owner Enter you name here (xxx) */ /* * Fill in host and port for Qlik engine */ var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 ); var config = { host: window.location.hostname, prefix: prefix, port: window.location.port, isSecure: window.location.protocol === "https:" }; //to avoid errors in workbench: you can remove this when you have added an app var app; require.config( { baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources" } ); require( ["js/qlik"], function ( qlik ) { var control = false; qlik.setOnError( function ( error ) { $( '#popupText' ).append( error.message + "<br>" ); if ( !control ) { control = true; $( '#popup' ).delay( 1000 ).fadeIn( 1000 ).delay( 11000 ).fadeOut( 1000 ); } } ); $( "#closePopup" ).click( function () { $( '#popup' ).hide(); } ); if ( $( 'ul#qbmlist li' ).length === 0 ) { $( '#qbmlist' ).append( "<li><a>No bookmarks available</a></li>" ); } $( "body" ).css( "overflow: hidden;" ); function AppUi ( app ) { var me = this; this.app = app; app.global.isPersonalMode( function ( reply ) { me.isPersonalMode = reply.qReturn; } ); app.getAppLayout( function ( layout ) { $( "#title" ).html( layout.qTitle ); $( "#title" ).attr( "title", "Last reload:" + layout.qLastReloadTime.replace( /T/, ' ' ).replace( /Z/, ' ' ) ); //TODO: bootstrap tooltip ?? } ); app.getList( 'SelectionObject', function ( reply ) { $( "[data-qcmd='back']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qBackCount < 1 ); $( "[data-qcmd='forward']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qForwardCount < 1 ); } ); app.getList( "BookmarkList", function ( reply ) { var str = ""; reply.qBookmarkList.qItems.forEach( function ( value ) { if ( value.qData.title ) { str += '<li><a data-id="' + value.qInfo.qId + '">' + value.qData.title + '</a></li>'; } } ); str += '<li><a data-cmd="create">Create</a></li>'; $( '#qbmlist' ).html( str ).find( 'a' ).on( 'click', function () { var id = $( this ).data( 'id' ); if ( id ) { app.bookmark.apply( id ); } else { var cmd = $( this ).data( 'cmd' ); if ( cmd === "create" ) { $( '#createBmModal' ).modal(); } } } ); } ); $( "[data-qcmd]" ).on( 'click', function () { var $element = $( this ); switch ( $element.data( 'qcmd' ) ) { //app level commands case 'clearAll': app.clearAll(); break; case 'back': app.back(); break; case 'forward': app.forward(); break; case 'lockAll': app.lockAll(); break; case 'unlockAll': app.unlockAll(); break; case 'createBm': var title = $( "#bmtitle" ).val(), desc = $( "#bmdesc" ).val(); app.bookmark.create( title, desc ); $( '#createBmModal' ).modal( 'hide' ); break; } } ); } //open apps -- inserted here -- var app = qlik.openApp('Store.qvf', config); //get objects -- inserted here -- //create cubes and lists -- inserted here -- app.createCube({ "qInitialDataFetch": [ { "qHeight": 20, "qWidth": 2 } ], "qDimensions": [ { "qLabel": "Product_Category", "qLibraryId": "VJfbVp", "qNullSuppression": true, "qOtherTotalSpec": { "qOtherMode": "OTHER_OFF", "qSuppressOther": true, "qOtherSortMode": "OTHER_SORT_DESCENDING", "qOtherCounted": { "qv": "5" }, "qOtherLimitMode": "OTHER_GE_LIMIT" } } ], "qMeasures": [ { "qDef": { "qDef": "Sum(Sales)" }, "qLabel": "Sum(Sales)", "qLibraryId": null, "qSortBy": { "qSortByState": 0, "qSortByFrequency": 0, "qSortByNumeric": 0, "qSortByAscii": 1, "qSortByLoadOrder": 0, "qSortByExpression": 0, "qExpression": { "qv": " " } } } ], "qSuppressZero": false, "qSuppressMissing": false, "qMode": "S", "qInterColumnSortOrder": [], "qStateName": "$" },testdata); if ( app ) { new AppUi( app ); } //callbacks function testdata(reply, app){ console.log(reply); //remove all d3 elements from svg // Pass Data into data variable // ApexCharts var options = { chart: { height: 350, type: 'area', stacked: true, events: { selection: function(chart, e) { console.log(new Date(e.xaxis.min) ) } }, }, colors: ['#008FFB', '#00E396', '#CED4DC'], dataLabels: { enabled: false }, stroke: { curve: 'smooth' }, series: [{ name: 'South', data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) }, { name: 'North', data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 20 }) }, { name: 'Central', data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 15 }) } ], fill: { type: 'gradient', gradient: { opacityFrom: 0.6, opacityTo: 0.8, } }, legend: { position: 'top', horizontalAlign: 'left' }, xaxis: { type: 'datetime' }, } var chart = new ApexCharts( document.querySelector("#chart"), options ); chart.render(); /* // this function will generate output in this format // data = [ [timestamp, 23], [timestamp, 33], [timestamp, 12] ... ] */ function generateDayWiseTimeSeries(baseval, count, yrange) { var i = 0; var series = []; while (i < count) { var x = baseval; var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; series.push([x, y]); baseval += 86400000; i++; } return series; } } } );
HTML
<html> <head> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="../../resources/assets/external/requirejs/require.js"></script> <script src="SalesMashups.js"></script> </head> <body> <div id="chart"></div> </body> </html>
___