2017-10-18 26 views
1

J'essaye de changer les noms de Highstock. names = ['MSFT', 'AAPL', 'GOOG']; Aux noms = ['ONE', 'TWO', 'TROIS']; Je veux changer les noms par n'importe quel nom. S'il vous plaît aidez.javascript, Fron end Développement

<script type="text/javascript"> 

    var seriesOptions = [], 
     seriesCounter = 0, 
     names = ['ONE', 'TWO', 'THREE']; 
    /** 
    * Create the chart when all data is loaded 
    */ 
    function createChart() { 

     Highcharts.stockChart('container', { 

      rangeSelector: { 
       selected: 4 
      }, 

      yAxis: { 
       labels: { 
        formatter: function() { 
         return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
        } 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 2, 
        color: 'silver' 
       }] 
      }, 

      plotOptions: { 
       series: { 
        compare: 'percent', 
        showInNavigator: true 
       } 
      }, 

      tooltip: { 
       pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
       valueDecimals: 2, 
       split: true 
      }, 

      series: seriesOptions 
     }); 
    } 

    $.each(names, function (i, name) { 

     $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) { 

      seriesOptions[i] = { 
       name: name, 
       data: data 
      }; 

      // As we're loading the data asynchronously, we don't know what order it will arrive. So 
      // we keep a counter and create the chart when all the data is loaded. 
      seriesCounter += 1; 

      if (seriesCounter === names.length) { 
       createChart(); 
      } 
     }); 
    }); 
</script> 

Mais quand je change ces noms graphique ne se charge pas. Tout type d'aide aprécié. Comment puis-je changer ces noms s'il vous plaît aider. Merci

Code original.

<div id="container" style="height: 400px; min-width: 310px; margin-bottom:20px;"></div> 


<script type="text/javascript"> 

    var seriesOptions = [], 
     seriesCounter = 0, 
     names = ['MSFT', 'AAPL', 'GOOG']; 
    /** 
    * Create the chart when all data is loaded 
    */ 
    function createChart() { 

     Highcharts.stockChart('container', { 

      rangeSelector: { 
       selected: 4 
      }, 

      yAxis: { 
       labels: { 
        formatter: function() { 
         return (this.value > 0 ? ' + ' : '') + this.value + '%'; 
        } 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 2, 
        color: 'silver' 
       }] 
      }, 

      plotOptions: { 
       series: { 
        compare: 'percent', 
        showInNavigator: true 
       } 
      }, 

      tooltip: { 
       pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
       valueDecimals: 2, 
       split: true 
      }, 

      series: seriesOptions 
     }); 
    } 

    $.each(names, function (i, name) { 

     $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) { 

      seriesOptions[i] = { 
       name: name, 
       data: data 
      }; 

      // As we're loading the data asynchronously, we don't know what order it will arrive. So 
      // we keep a counter and create the chart when all the data is loaded. 
      seriesCounter += 1; 

      if (seriesCounter === names.length) { 
       createChart(); 
      } 
     }); 
    }); 
</script> 

Répondre

0

Le tableau est rempli avec les valeurs de la ligne:

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) { 

name.tolowercase() prend la valeur des noms de variables

names = ['MSFT', 'AAPL', 'GOOG']; 

et récupère le contenu du fichier:

https://www.highcharts.com/samples/data/jsonp.php?filename=msft-c.json&callback=?

https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?

https://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?

Alors, quand vous remplacez par noms = [ 'ONE', 'deux', 'trois'];

il ne trouve pas les fichiers correspondant sur le serveur

https://www.highcharts.com/samples/data/jsonp.php?filename=one-c.json&callback=?

J'espère que ça aide :).

Les fichiers devront être placés sur le serveur avec les données pertinentes pour les cartes à charger.

+0

Nous vous remercions de votre réponse Tphil. Comment puis-je ajouter ces fichiers sur mon serveur local ou localhost? – Sohaib

+0

Vous pouvez exécuter les fichiers dans un environnement d'hébergement local. Un moyen très simple pourrait être trouvé ici - [link] (http://jasonwatmore.com/post/2016/06/22/nodejs-setup-simple-http-server-local-web-server). Vous pouvez placer vos fichiers dans ce dossier. Si vous avez cependant un serveur en cours d'exécution. Ensuite, vous devriez naviguer vers le répertoire de service et placer les fichiers là. L'emplacement varie en fonction du serveur utilisé. – Tphil

0

Vous obtenez une erreur lorsque vous souhaitez obtenir une réponse JSON pour les fichiers 'un', 'deux' et 'trois', pour cette raison, le graphique ne se charge pas. Pour gérer cette exception, je vous suggère d'utiliser les méthodes Ajax de jQuery .fail() et .always() comme this.

Si vous voyez mon exemple, le graphique se charge, même sans données.