Anforderungen
Vollständiges Beispiel
API Dokumentation

Anforderungen

Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:

• JQuery
• Highcharts
• Tinycolor
• DSER Services

Vollständiges Beispiel

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></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 href="https://api-public.niiio.me/public/common/default-theme.css" rel="stylesheet">
    <link href="https://api-public.niiio.me/public/effizienter-rand/css/effizienter-rand.css" rel="stylesheet">
</head>
<body>

<div class="row">
    <div class="col-xs-8 col-xs-offset-2">
        <div id="effizienter-rand-container" class="dser-theme"></div>
    </div>
</div>

<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>

<script type="text/javascript">
    require(['dser.effizienterRand'], function () {
        $("#effizienter-rand-container").effizienterRand({
            token: '<your-custom-api-token>',
            onStockAllocationSelected: function(stockAllocation) {
                console.log(stockAllocation);
            },
            wkns: ["#90004","710000","348195","728156","764930","765846","769088","812925","847603","848665","849108","972137","972219","974177","976168","977020","977261"]
        });
    });
</script>

</body>
</html>

API Dokumentation

Initialisieren

Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert.

$("#effizienter-rand-container").effizienterRand({
    token: '<your-custom-api-token>',
    onStockAllocationSelected: function(stockAllocation) {
        console.log(stockAllocation);
    },
    wkns: ["#90004","710000","348195","728156","764930","765846","769088","812925","847603","848665","849108","972137","972219","974177","976168","977020","977261"]
});

Erforderliche Konfigurationsoptionen

Key Description
token The security-token to check if your connection is valid.

Erweiterte und optionale Konfigurationsmöglichkeiten

Key Description Default
wkns array of the Wertpapierkennnummern (Securities identification numbers) to be used for the calculation of optimal stock allocations. []
baseUrl url to DSER api service https://api-public.niiio.me
onAllocationSelected(StockAllocation) function
returns an bject containing the selected allocation on the eff. Rand.

StockAllcoation: {
wkn, isin, name, risk, yield, share
}

Integration

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.

Fügen Sie die Stylesheets in Ihre Seite ein

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://api-public.niiio.me/public/effizienter-rand/effizienter-rand.css" >

Erstellen eines Containers

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="effizienter-rand-container" style="height: 400px; width: 400px;"></div>

Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein

Es existieren 2 Wege um die Skriptdateien einzufügen:

Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS

• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skrtipte 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.

Implementieren der erforderlichen JavaSkript-Dateien

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>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

<script type="text/javascript">
    require(['dser.effizienterRand'], function () {
        $("#effizienter-rand-container").effizienterRand({
            token: '<your-custom-api-token>'
        });
    });
</script>

Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS

• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.

Einfügen der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, idem Sie folgenden Block an das Ende des Bodys einfügen:

<script src="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script src="https://api-public.niiio.me/public/common/charts/highcharts.bugfix.js"></script>
<script src="https://api-public.niiio.me/public/common/charts/highcharts.more.js"></script>
<script src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script>
<script src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script src="https://api-public.niiio.me/public/common/color/ColorService.js"></script>
<script src="https://api-public.niiio.me/public/common/charts/tooltip/ChartTooltipService.js"></script>
<script src="https://api-public.niiio.me/public/common/services/StockService.js"></script>
<script src="https://api-public.niiio.me/public/effizienter-rand/js/EffizienterRandChartConfigBuilder.js"></script>
<script src="https://api-public.niiio.me/public/effizienter-rand/js/EffizienterRandChartService.js"></script>
<script src="https://api-public.niiio.me/public/effizienter-rand/js/OptimizationService.js"></script>
<script src="https://api-public.niiio.me/public/effizienter-rand/jquery.effizienter-rand.js"></script>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein:

<script type="text/javascript">
$(function() {
    $("#effizienter-rand-container").effizienterRand({
        token: '<your-custom-api-token>'
    });
});
</script>

Im Kapitel „API-Dokumentation“ finden Sie eine komplette Übersicht aller Optionen und Eigenschaften, um die Komponente anzupassen.

Hier erhalten Sie Ihren API-Schlüssel

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.

Schließen