This example shows how to integrate the dashboard viewer into a Vue.js application. First of all, load scripts:
<script src="/stimulsoft/stimulsoft.reports.js"></script>
<script src="/stimulsoft/stimulsoft.dashboards.js"></script>
<script src="/stimulsoft/stimulsoft.viewer.js"></script>

Then, integrate the dashboard viewer into an application:
<script>
	export default {
		name: 'app',
		data () {
			return {
   			}
		},

		mounted: function() {
			console.log('Loading Viewer view');
    
			console.log('Creating the dashboard viewer with default options');
			var viewer = new window.Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);
			console.log('Creating a new dashboard instance');
    
			var report = window.Stimulsoft.Report.StiReport.createNewDashboard();
			console.log('Load dashboard from url');
			report.loadFile('/dashboard/DashboardChristmas.mrt');
			console.log('Assigning dashboard to the viewer, the dashboard will be built automatically after rendering the viewer');
			viewer.report = report;
			console.log('Rendering the viewer to selected element');
			viewer.renderHtml('viewer');
			console.log('Loading completed successfully!');
		}
	}
</script>

На скриншоте ниже Вы можете увидеть результат выполнения данного кода:

Integrating the Dashboard Viewer into an Application

Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.