2017-10-18 1 views
1

ハイストックの名前を変更しようとしています。名前= ['MSFT'、 'AAPL'、 'GOOG'];名前= ['ONE'、 'TWO'、 'THREE'];名前を変えて名前を変えたい。助けてください。javascript、Fron end開発

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

しかし、私はこれらの名前を変更したときにチャートがロードされません。どのような種類のヘルプは評価されました。これらの名前をどのように変更すればよいですか。ありがとう

オリジナルコード。

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

答えて

0

チャートが行からの値が移入されている:name.tolowercase()ファイルからコンテンツを

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

変数名の値をとり、フェッチ

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

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

ですから、 名に置き換えたときに= [ 'ONE'、 'TWO'、 'THREE'];

それがサーバー

https://www.highcharts.com/samples/data/jsonp.php?filename=one-c.json&callback=上のファイルを対応見つかりませんか?

希望する:)。

グラフをロードするには、関連するデータとともにサーバーにファイルを配置する必要があります。

+0

応答テフィルに感謝します。これらのファイルをローカルサーバーまたはローカルホストに追加するにはどうすればよいですか? – Sohaib

+0

ローカルホスティング環境でファイルを実行できます。本当に簡単な方法がここにあります - [リンク](http://jasonwatmore.com/post/2016/06/22/nodejs-setup-simple-http-server-local-web-server) ファイルをこのフォルダの中に置くことができます。 ただし、実行中のサーバーがある場合。次に、配信ディレクトリに移動し、そこにファイルを置く必要があります。場所は使用しているサーバーによって異なります。 – Tphil

0

ファイル 'one'、 'two'、および 'three'のJSON応答を取得すると、チャートが読み込まれないため、エラーが発生します。

この例外を処理するには、.fail().always()のようなjQueryのAjaxメソッドを使用することをお勧めします。this

私の例を見ると、データがなくてもグラフが読み込まれます。

関連する問題