为 HighChart 列范围表示转换和排序数据答案

【问题标题】：Convert and Sort Data for HighChart Column Range Representation为 HighChart 列范围表示转换和排序数据
【发布时间】：2019-04-12 17:34:20
【问题描述】：

我有一些数据以随机顺序出现，并希望转换为 Highchart 列范围的特定顺序。任何有关有效执行此操作的见解和见解都会有所帮助

此外，无论输入数据的顺序如何，我总是希望以 Apple Orange Banana 顺序显示图表并正确表示

我曾尝试在 ruby 中使用地图、集合、数组，并且有一些非常脆弱但不是最有效的工作。

            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/

【问题讨论】：

标签： ruby-on-rails json highcharts

【解决方案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/

【讨论】：