转换和排序数据以用于HighChart列范围表示

时间:2019-04-12 17:34:21

标签: ruby-on-rails json highcharts

我有一些数据是随机排列的,并且想要转换为Highchart列范围的特定顺序。有效执行此操作的任何见解和见识都会有所帮助

无论输入数据的顺序如何,我总是想以正确的表示形式按Apple Orange Banana顺序显示图表

我曾尝试在ruby中使用maps,sets,array,并且某些功能非常脆弱,但并不是最有效。

            headers = Array.wrap(raw_data.dig('data', 'dimensions', 'axes', 'headers'))
            values  = Array.wrap(raw_data.dig('data', 'values', 'c')).map(&:to_f)
            labels  = headers.map { |header| Array.wrap(header['label']) }
            data = values.each_slice(2)

这是水果的重量,LOW是最低重量,HIGH是最高重量。问题是数据的顺序是按权重排序的,所以我不能只对数组的连续值进行切片。

JSON数据

{
  "data": {
    "dimensions": {
      "axes": {
        "headers": [{
          "label": ["Apple", "Low"]
        }, {
          "label": ["Apple", "High"]
        }, {
          "label": ["Orange", "Low"]
        }, {
          "label": ["Banana", "Low"]
        }, {
          "label": ["Orange", "High"]
        }, {
          "label": ["Banana", "High"]
        }]
      }
    }
    "values": {
      "c": ["173", "273", "414", "608", "610", "1050"]
    }
}

预期产量

{
        series: [
          {'name': 'Weight', 'data': [[173, 273], [414, 610], [608, 1050]]}
        ],
        axis_labels: ['Apple', 'Orange', 'Banana'],
 }

图表 https://jsfiddle.net/Praveen2710/7sdqz6Le/8/

1 个答案:

答案 0 :(得分:1)

您需要将数据预处理为Highcharts所需的格式:

var json = {...}

var series = {
        name: 'Weight',
        data: []
    },
    i,
    header1,
    header2,
    value,
    indexOf,
    point,
    categories = [];

for (i = 0; i < json.data.values.c.length; i++) {
    labels = json.data.dimensions.axes.headers[i].label;
    header1 = labels[0].toLowerCase(),
        header2 = labels[1].toLowerCase(),
        value = json.data.values.c[i];
    indexOf = categories.indexOf(header1);

    if (indexOf !== -1) {
        series.data[indexOf][header2] = Number(value);
    } else {
        categories.push(header1);

        series.data.push({
            [header2]: Number(value),
            x: series.data.length
        });
    }
}

Highcharts.chart('container', {
    ...,
    series: [series]
});

实时演示:http://jsfiddle.net/BlackLabel/nm976qho/