- JQuery
- Bootstrap
- Backbone
- Underscore
- Mustache
- Highstock
- Tinycolor
- DSER Services / components
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Sample</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css"> <link rel="stylesheet" href="https://api-public.niiio.me/public/stockprices/css/stockprices.css"> </head> <body> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highstock.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highcharts.more.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/services/StockService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartConfigBuilder.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/jquery.stockprices.js"></script> <div class="container"> <div class="row"> <div class="col-xs-12"> <div id="stockprices-container"></div> </div> </div> <hr/> <div class="checkbox"> <label> <input type="checkbox" id="toggle-peergroup"> PeerGroup-Verlängerung </label> </div> <p> <a class="btn btn-default btn-stock" data-stock-wkn="710000">710000</a> <a class="btn btn-default btn-stock" data-stock-wkn="519000">519000</a> <a class="btn btn-default btn-stock" data-stock-wkn="328292">328292</a> </p> </div> <script type="text/javascript"> $(function () { var stockPrices = $("#stockprices-container").stockPrices({ token: '<your-custom-api-token>', wkn: '710000', peerGroup: $('#toggle-peergroup').prop('checked') }); $('#toggle-peergroup').on('change', function() { stockPrices.setPeergroupExtension($(this).prop('checked')); }); $('a.btn-stock').on('click', function() { stockPrices.renderStockPricesChart($(this).data('stock-wkn'), null, $('#toggle-peergroup').prop('checked')); }); }); </script> </body> </html>
Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert.
$("#stockprices-container").stockPrices({ baseUrl: 'https://api-public.niiio.me', token: '<your-custom-api-token>', title: 'Wertpapierverlauf in EUR', color: '#7CB5EC', wkn: '710000', peerGroup: true, peerGroup: 'Ende der Peergroupverlängerung' });
Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.
Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css"> <link rel="stylesheet" href="https://api-public.niiio.me/public/stockprices/css/stockprices.css">
Erstellen Sie einen <div> Container für diese Komponente in dem <body> Bereich. Sie können unser Standard CSS-Style verwenden, indem Sie die Klasse „dser-theme“ für den Container nutzen.
<div id="stockprices-container"></div>
Es existieren 2 Wege um die Skriptdateien einzufügen:
• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron durch RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.
Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:
<script type="text/javascript" src="https://api-public.niiio.me/public/require-config.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/require.js"></script>
Fügen Sie diesen Block nach den Skript-Dateien ein:
<script type="text/javascript"> require(['dser.stockPrices'], function () { $("#stockprices-container").stockPrices({ token: '<your-custom-api-token>', wkn: '710000' }); }); </script>
• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.
Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen:
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highstock.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highcharts.more.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/common/services/StockService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartService.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartConfigBuilder.js"></script> <script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/jquery.stockprices.js"></script>
Fügen Sie diesen Block nach den Skript-Dateien ein:
<script type="text/javascript"> $(function () { $("#stockprices-container").stockPrices({ token: '<your-custom-api-token>', wkn: '710000' }); }); </script>
Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen
Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.