동적 차트

ActiveReportsJS는 인기 있는 모든 차트 유형을 제공할 뿐만 아니라 비교할 수 없는 대화형 기능으로 시각적 표시를 향상시킵니다. ActiveReportsJS를 사용하면 차트가 매우 인터랙티브하고 역동적이 되어 보고서 독자에게 풍부하고 매력적인 경험을 제공합니다. 이 데모에서 차트는 선택 가능한 기간 동안의 수익 추세를 표시하며 기본값은 분기별입니다. 그러나 월별 또는 연도별 링크를 클릭하기만 하면 차트가 변환되어 데이터에 대한 실시간 심도 있는 보기를 제공합니다. ActiveReportsJS로 상호 작용의 리포트 기능을 구현할 수 있습니다.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-viewer.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-designer.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/common/report-sample-style.css" /> <script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-designer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <script> function onLoad() { var paramsOpened = false; initReportSample( "viewer-host", "designer-host", "RevenueTrend.rdlx-json", "Dynamic Chart", function (viewer) { viewer.documentLoaded.register(function () { var paramsBtn = document.querySelector( 'button[title="Parameters"]' ); if (paramsBtn && !paramsOpened) { paramsBtn.click(); paramsOpened = true; } }); } ); } </script> </head> <body onload="onLoad()"> <div id="root"> <div id="viewer-host"></div> <div id="designer-host"></div> </div> </body> </html>