Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:
1. В теге HEAD добавьте ссылки на следующие css-файлы: PP.css, PP.Express.css, PP.Metabase.css.
Также нужно добавить ссылки на js-файлы: PP.js, PP.ChartMaster.js, PP.MapMaster.js, PP.MapChart.js, PP.TabSheet.js, PP.Metabase.js, PP.Navigator.js, PP.Express.js, jquery.js, resources.ru.js.
2. В теге SCRIPT добавьте код для создания компонентов MapMaster и EaxMapBox:
<script type="text/javascript"> var eaxData; var idTime; onReady = function () { var IMAGE_PATH = "../../build/img/"; //путь к папке с картинками PP.resourceManager.setRootResourcesFolder("../resources/"); //путь к папке с ресурсами PP.setCurrentCulture(PP.Cultures.ru); //выбор языковых настроек var eaxAnalyzer, eaxMbService; //создаем компонент Waiter для ожидания соединения с метабазой waiter = new PP.Ui.Waiter(); //Создаем экземпляр метабазы metabase = new PP.Mb.Metabase({ Id: "WAREHOUSE", UserCreds: { UserName: "sa", Password: "Qwerty1" }, StartRequest: function () { waiter.show(); }, EndRequest: function () { waiter.hide(); }, Error: function (sender, args) { alert(args.ResponseText); } }); //Открываем метабазу metabase.open(); //Создаем сервис для работы с экспресс-отчетами eaxMbService = new PP.Exp.EaxMdService({ Metabase: metabase }); //открываем экспресс-отчет с ключом 935529 на редактирование eaxAnalyzer = eaxMbService.edit(935529); //Создаем контейнер для карты экспресс-отчета
mapBox = new PP.Exp.Ui.EaxMapBox({ Source: eaxAnalyzer, // Источник данных Width: 500, Height: 500, ParentNode: "Map", Service: eaxMbService }); //Создаем мастер карты master = new PP.Ui.MapMaster({ ParentNode: "mapM", //DOM-вершина, в которой будет размещаться мастер диаграммы Height: 500, Width: 310, ImagePath: IMAGE_PATH, DataView: mapBox }); } </script>
3. В теге BODY разместите созданные компоненты:
<body onselectstart="return false" class="PPNoSelect" onload="onReady()"> <table style="width: 100%"> <tr> <td valign="top" width="350" id="mapM"> </td> <td valign="top" id="Map"> </td> </tr> </table> </body>
После выполнения примера на странице будет размещена карта экспресс-отчета и мастер для ее настройки:
См. также: