Discussion :

[SlimEmShady]

Bonjour,

J'ai développé une application mobile avec Ionic 1 et AngularJS donc, et j'aimerais y ajouter des statistiques sur ma page d'accueil avec Highcharts.
Sur une page web classique, il est très simple d'implémenter Highcharts, on importe les scripts, on crée une <div> vide, et on lance le script Highchart pour l'afficher et le configurer.

Cependant, je n'arrive absolument pas à afficher mon graphique avec Highchart et Ionic 1...
Je ne sais pas trop quelle partie du code vous montrer, mais dans le doute :

index.html (le reste est le code classique d'un index.html ionic 1)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

La page sur laquelle je veux afficher mon graphique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<view title="'SmartBoard'">
  <div class="bar bar-subheader item-input-inset">
      <a class="button button-positive ion-gear-a decal"  ng-click="login()" href="#/login"></a>
      <label class="item-input-wrapper">
          <i class="icon ion-ios7-search placeholder-icon" ></i>
          <input id="searchKey" type="search"  ng-keypress="search()" ng-enter="search()" placeholder="Entrez votre NNI" ng-model="searchKey" autocorrect="off" >
          <button class="button button-clear" ng-click="clearSearch()">X</button>
      </label>
      <form>
      <button type="search" class="button button-positive ion-search search_employee" ng-click="search()"></button>
      </form>
  </div>
    <div id="container_chart"></div>
    <script src="js/chart.js"></script>
</view>
<ion-footer-bar id="footer">
  <div ng-click="sendFeedback()" class="bar bar-footer bar-balanced">
      <div class="title">© DCO 2017</div>
      <img class="contact" src="img/email.png" width="4.5%" height="50%"/>
  </div>
</ion-footer-bar>

Je ne pense pas nécessaire de vous montrer le code de configuration de mon graphique, sur JSFiddle il marche très bien, ainsi que sur une page web classique...

Voici à quoi ressemble la page d'accueil, il ne manque que le graphique au milieu... :


Merci de votre aide, n'hésitez pas à me demander de fournir plus de sources ^^

Bonne journée !