ハイチャートのxAxisとしてシリーズ名を使用

Question

xAxisとして自分のシリーズ名を使用したいと思います。私は以下のコードのように試してみました。このコードは複数の系列を作成していますが、x軸の値は1つのみです。私のコードで、すべてのファンドのシリーズを作成し、xAxisのファンド値をプロットしたいとしましょう。

function draw(fund, zreturn) { 

    zreturn = [12.75, 11.77, 13.76]; 
    fund = ['abc', 'xyz', 'pqr']; 

    var options = {}; 
    options = { 

     chart: { 
      renderTo: 'graphDiv', 
      type: 'line', 
      Height: '400px' 

     }, 
     credits: { 
      enabled: false 
     }, 
     title: { 
      text: 'Fund Performance Graph', 
      x: -20 
     }, 

     subtitle: { 
      text: '', 
      x: -20 
     }, 

     xAxis: { 
      categories: fund 
      } 
     }, 

     yAxis: { 
      labels: { 
       enabled: true, 
       format: function() { 
        return (this.value + '%') 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0, 

     }, 

     series: zreturn.filter(function (zreturn, i) { 


      return fund[i] 

     }).map(function (zreturn, i) { 
      /* Then return as series */ 
      return { 
       //type: 'line', 
       name: fund[i], 
       data: zreturn, 
       dataLabels: { 
        align: 'center', 
        enabled: true, 
        format: "{y:.2f}" + '%', 
        style: { 
         fontSize: "8px", 
         fontFamily: 'Arial', 

        }, 

       } 
      } 
     }) 
    } 

    var chart = new Highcharts.Chart(options); 

}; 

Answer 1

私は今あなたのコードに小さな間違いがあると思います。

まず、yAxis.labels.formatを関数として使用しています。あなたは関数としてそれを使用したい場合は、フォーマッタでなければなりません：

yAxis: { 
    labels: { 
    enabled: true, 
    formatter: function() { 
     return (this.value + '%') 
    } 
    } 
}, 

次に、あなたがあなたのデータに誤りがあり、それは配列でなければなりません：

data: [ 
    [i, zreturn] 
], 

私はここでのxの値を加算していますあなたのポイントだけでなくyの値。 x値を追加しない場合、ポイントは常に0から始まり、すべてのシリーズに1つのポイントしか追加していないため、すべてが最初のカテゴリになります。

ここでは、あなたのチャートは、これらの小さな修正でも動作する方法の例を見つけることができます：あなたが望むようにそれが動作するので、私はあなたのコードを修正した http://jsfiddle.net/worg6jLz/29/