JSONデータと複数のシリーズのハイチャート

Question

ハイチャートの折れ線グラフをレンダリングしようとしていますが、ページの読み込み時にシリーズが表示される問題があります。 Firebugはエラーを表示しないので、データがどのように構造化されているか、Highchartsにどのように渡されているかに問題があると推測しています。

データは、another siteから取得したメソッドを使用して変数がロードされています。私のデータは、月ごとの数値のy値で、customTooltipはホバーに表示する追加データです。

$.getJSON("json/mydata.txt",function(jdata) { 

var arr = []; 
$.each(jdata, function(key, val) { 
    var y = val.y; 
    var name = key; 
    var customTooltip = val.n; 
    arr.push({y: y, customTooltip: customTooltip}) 
}) 

var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]}; 

var options = { 
      chart: { 
       renderTo: 'fallcontainer', 
       defaultSeriesType: 'line' 
       }, 
      title: { 
       text: 'Monthly Rate', 
       style: { 
        margin: '10px 100px 0 0' // center it 
       } 
       }, 
      subtitle: { 
       text: 'Source', 
       style: { 
        margin: '0 100px 0 0' // center it 
       } 
       }, 
      xAxis: { 

       categories: ['Jan 12', 'Feb 12', 'Mar 12'] 
       }, 
      yAxis: { 
       title: { 
        text: 'Rate', 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }], 
       min:0 
       }, 
      legend: { 
       layout: 'vertical', 
       align:'right', 
       verticalAlign:'middle', 
       x:0, 
       title:'Care Setting' 
       }, 
      plotOptions: { 
       }, 
      credits: { 
       enabled:false 
       }, 
      series:[] 
}; 

options.series.push(jseries); 

var chart = new Highcharts.Chart(options); 

}); 

これは良い例です。私が本当に表示したいのは、y軸に 'y'を、ホバーに 'n'と 'y'のデータを置いたものです。 JSONLintはこれが有効であると述べました。

{ 
"Total": { 
    "y": [ 
     9.39, 
     90.35, 
     90.36, 
     92.69, 
     93.02, 
     90.32, 
     90.6, 
     9.09, 
     9.5, 
     90.69, 
     9.6, 
     90.69, 
     9.53, 
     6.92 
    ], 
    "name": "Total", 
    "n": [ 
     962, 
     969, 
     999, 
     233, 
     235, 
     968, 
     999, 
     963, 
     989, 
     293, 
     986, 
     293, 
     989, 
     908 
    ] 
}, 
"Cat1": { 
    "y": [ 
     6.38, 
     6.63, 
     90.3, 
     9.65, 
     90.25, 
     8.99, 
     92.39, 
     99.39, 
     9.28, 
     99.35, 
     99.36, 
     93.38, 
     8.69, 
     8.03 
    ], 
    "name": "Cat1", 
    "n": [ 
     6, 
     6, 
     90, 
     90, 
     90, 
     8, 
     93, 
     93, 
     99, 
     93, 
     93, 
     96, 
     99, 
     9 
    ] 
} 
} 

Answer 1

あなたはこれを見なければならない：http://api.highcharts.com/highcharts#series.data

あなたがオブジェクトとして各ポイントを指定する場合は、各点にしたい任意のプロパティを追加し、this.pointを通して、あなたのツールチップフォーマッタにアクセスすることができます。

として現在にフォーマット

var seriesArr = []; 
$.each(jdata, function(key, data) { 
    var series = {name : key, data : []}; 

    $.each(data.y, function(index, value) { 
    series.data.push({y: value }); 
    }); 

    $.each(data.n, function(index, value) { 
    series.data[index].n = value; 
    }); 
    seriesArr.push(series); 
}); 

これは、得られるはずのデータで

：

seriesArr : [{ 
    name : 'Total', 
    data : [ 
     {y:9.39, n:9.62}, 
     ... 
    ] 
    }, 
... 
] 

を次に、あなたのフォーマッタ機能では、あなたがthis.point.yやthis.point.nとしてそれぞれをacccessすることができます

tooltip: { 
    formatter: function() { 
    return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n; 
    } 
}, 

ワーキング：http://jsfiddle.net/sgearhart2/9P5fC/