highcharts.jsでカスタムヒストグラムを作成する

Question

以下のデータを使ってヒストグラムを作成する必要があります。これはデータのサンプルであり、実際のオブジェクトははるかに大きくなります。 x軸はもう少し複雑ですが、私はy軸を '読み込み'にする必要があります。 x軸は0〜1の範囲で、x軸の棒は 'RankMetric'変数に対応する位置になければなりません。ハイチャートでこのようなヒストグラムを作成することは可能ですか？私はこれを見つけましたfiddle hereしかし、私はどのようにx軸を設定し、正しい位置に棒をプロットするのか分かりません。どんな助けでも大変感謝しています。

私はこのような方法でx軸の範囲を設定できますが、 'RankMetric'変数に応じてx軸をプロットするにはどうすればよいですか？

xAxis:{ 
min:0, 
max:1, 
tickInterval: 0.1, 
crosshair: true 
} 

データ：

var obj = { 
    "Reads":1721745, 
    "Present":1, 
    "RankMetric":0.397851, 
    "organism_labels":"klebsiella_oxytoca" 
},{ 
    "Reads":66529, 
    "Present":1, 
    "RankMetric":0.609935, 
    "organism_labels":"staphylococcus_aureus" 
},{ 
    "Reads":45563, 
    "Present":1, 
    "RankMetric":0.505084, 
    "organism_labels":"legionella_longbeachae" 
},{ 
    "Reads":83471, 
    "Present":1, 
    "RankMetric":0.669884, 
    "organism_labels":"enterobacter_aerogenes" 
}, { 
    "Reads":1309077, 
    "Present":1, 
    "RankMetric":0.688673, 
    "organism_labels":"pseudomonas_aeruginosa" 
} 

Answer 1

データ点は、xとy性質を持っている必要があります。データは昇順でxでソートする必要があります。この問題を解決して、要件を満たすための解析機能を作成することができます。例：http://jsfiddle.net/4xjq56bh/

$(function() { 
    var data = [{ 
    "Reads": 1721745, 
    "Present": 1, 
    "RankMetric": 0.397851, 
    "organism_labels": "klebsiella_oxytoca" 
    }, { 
    "Reads": 66529, 
    "Present": 1, 
    "RankMetric": 0.609935, 
    "organism_labels": "staphylococcus_aureus" 
    }, { 
    "Reads": 45563, 
    "Present": 1, 
    "RankMetric": 0.505084, 
    "organism_labels": "legionella_longbeachae" 
    }, { 
    "Reads": 83471, 
    "Present": 1, 
    "RankMetric": 0.669884, 
    "organism_labels": "enterobacter_aerogenes" 
    }, { 
    "Reads": 1309077, 
    "Present": 1, 
    "RankMetric": 0.688673, 
    "organism_labels": "pseudomonas_aeruginosa" 
    }]; 

    //data points needs to have x and y properties 
    Highcharts.each(data, function(point, i) { 
    point.y = point.Reads; 
    point.x = point.RankMetric; 
    }); 
    //data should be sorted by x in ascending order 
    data = data.sort(function(a,b){ 
    return a.x - b.x; 
    }); 

    $('#container').highcharts({ 
    series: [{ 
     data: data, 
     type: 'column', 
     pointPadding: 0, 
     groupPadding: 0 
    }], 
    xAxis: { 
     min: 0, 
     max: 1, 
     tickInterval: 0.1, 
     crosshair: true 
    } 
    }); 
});