Cloud
Облачный сервис для быстрого и эффективного анализа и визуализации данных для вашего бизнеса без необходимости создания своих приложений и программирования.
Integrating the Dashboard Viewer into an Application (TypeScript)
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.Этот пример является устаревшим, посмотрите множество других обновлённых примеров в данной категории.This example shows how to integrate the dashboard viewer into a React application with TypeScript. First of all, load scripts:
Then, create an
Finally, use
import React from 'react';
import { Stimulsoft } from 'stimulsoft-dashboards-js/Scripts/stimulsoft.viewer'
import 'stimulsoft-dashboards-js/Css/stimulsoft.viewer.office2013.whiteblue.css';
import './App.css';Then, create an
App class which extends from React component:
class App extends React.Component {
private viewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
private report = Stimulsoft.Report.StiReport.createNewDashboard();
render() {
return (
<div id="viewer" className="App">
</div>
);
}
...Finally, use
componentDidMount() method to set viewer options, load the dashboard and display it in the viewer:
...
async componentDidMount() {
console.log('Loading Viewer view');
const response = await fetch('dashboard/DashboardChristmas.mrt');
const data = await response.json();
console.log('Load dashboard from url');
this.report.loadDocument(data);
this.viewer.report = this.report;
console.log('Rendering the viewer to selected element');
this.viewer.renderHtml('viewer');
}
...