Question

我需要用下面的数据创建一个直方图，这是一个数据样本，真实对象要大得多。我需要y轴为'Reads'，而x轴稍微复杂一些。 x轴应该是0-1的范围，x轴上的条应该对应于'RankMetric'变量。是否可以使用highcharts构建这样的直方图？我发现了这个fiddle here，但我不知道如何设置x轴并将条形图绘制在正确的位置。非常感谢任何帮助，谢谢。

我可以用这样的东西设置x轴范围，但是如何根据'RankMetric'变量在x轴上绘图？

<opencv2/highgui.hpp>

数据：

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

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
    }
  });
});

使用highcharts.js构建自定义直方图

1 个答案: