Преобразование данных в проценты Highcharts

Question

данные, которые я отформатирован так:

[{"name":"project1","data":[50291,7410,2013,2013,524,201]},{"name":"project2","data":[1776995,758630,25633,4120054,24521,2045]}] 

В cateogries на XAxis моего highchart являются:

['%50', '%60', '%70', '%80', '%90', '%95'] 

Мой код прямо сейчас показывает гистограмму с категориями xAxis и значениями разных проектов в каждой категории. Я бы хотел иметь относительные проценты. Что означает, есть ли способ, который для каждой категории я считаю самым высоким значением, установить это значение на 100% и поместить другие значения в этой категории относительно этого 100%?

Я пробовал пару таких, но пока не повезло. И я также не могу найти хороший пример этого.

Код, который у меня есть, принимает значения absoulte и складывает значения, но это не то, что я хотел бы.

я включу мой код

$(function() { 

    var options = { 
     chart: { 
      renderTo: 'container_2', 
      type: 'column', 
      options3d: { 
       enabled: true, 
       alpha: 0, 
       beta: 0, 
       depth: 0, 
       viewDistance: 25 
      } 
     }, 
     title: { 
      text: 'Data' 
     }, 
     subtitle: { 
      text: 'Dataset' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'percent' 
      } 
     }, 
     series: [{name: '', data: []}], 
     xAxis: { 
      categories: ['%50', '%60', '%70', '%80', '%90', '%95'] 
     }, 
     yAxis: { 
      /* Other things */ 
      labels: { 
       formatter: function(){ 
        return 100 * this.value/$(this.axis.tickPositions).last()[0] + '%'; 
       } 
      } 
     }, 

     credits: { 
      enabled: false 
     } 
    }; 
    $.getJSON('/uploads/test.json', function (list) { 
     options.series = list; 

     var chart = new Highcharts.Chart(options);  

     function showValues() { 
      $('#alpha-value').html(chart.options.chart.options3d.alpha); 
      $('#beta-value').html(chart.options.chart.options3d.beta); 
      $('#depth-value').html(chart.options.chart.options3d.depth); 
     } 

     // Activate the sliders 
     $('#sliders input').on('input change', function() { 
      chart.options.chart.options3d[this.id] = this.value; 
      showValues(); 
      chart.redraw(false); 
     }); 

     showValues(); 
    }); 
}); 

Пример того, как я хотел бы граф смотреть

Четыре бара все разные проекты и 412,628 является высшей ценностью!

Answer 1

Вы должны обрабатывать Highcharts как библиотеку для визуализации данных, а не анализировать ее, поэтому данные должны быть подготовлены перед визуализацией диаграммы. Итак, вам нужно рассчитать процент по своему усмотрению.

Во-первых, вы должны найти максимальные значения для каждой категории

var listLen = list.length, 
    dataLen = list[0].data.length, 
    dataMaxes = list[0].data.slice(), 
    point, 
    dataIndex, 
    listIndex; 

for (dataIndex = 0; dataIndex < dataLen; dataIndex++) { 
    for (listIndex = 1; listIndex < listLen; listIndex++) { 
    point = list[listIndex].data[dataIndex] 
    if (point > dataMaxes[dataIndex]) { 
     dataMaxes[dataIndex] = point; 
    } 
    } 
} 

Во-вторых, вы должны подготовить объект серии, вам нужно вычислить процент и хранить абсолютное значение, чтобы иметь доступ к нему (например, в виде всплывающей подсказки).

options.series = list.map(function (project) { 
    return { 
    name: project.name, 
    data: project.data.map(function (point, dataIndex) { 
     return { 
     y: (point/dataMaxes[dataIndex]) * 100, 
     absoluteY: point 
     }; 
    }) 
    } 
}); 

В-третьих, формат этикетки, подсказок и т.д., в этом случае добавить символ процента к значению, и absoluteY заданное значение в подсказке.

yAxis: { 
    /* Other things */ 
    labels: { 
    format: '{value}%' 
    } 
}, 

tooltip: { 
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.absoluteY}</b><br/>' 
}, 

Пример: https://jsfiddle.net/bm3hpdc6/3/

Answer 2

Для установки наибольшего значения из числа данных для всех проектов в качестве эталона (на уровне 100%), изменить данные в объекте серии как так -

series: [{ 
     name: 'Project1', 
     data: [highestValueForThisProject/HighestValueForAllProjects * 100] 

    }, { 
     name: 'Project2', 
     data: [highestValueForThisProject/HighestValueForAllProjects * 100] 

    }, { 
     name: 'Project3', 
     data: [highestValueForThisProject/HighestValueForAllProjects * 100] 

    }, { 
     name: 'Project4', 
     data: [highestValueForThisProject/HighestValueForAllProjects * 100] 

    }] 

, например -

series: [{ 
     name: 'Project1', 
     data: [353.832/412.628 * 100] 

    }, { 
     name: 'Project2', 
     data: [31.812/412.628 * 100] 

    }, { 
     name: 'Project3', 
     data: [83.966/412.628 * 100] 

    }, { 
     name: 'Project4', 
     data: [412.628/412.628 * 100] 

    }] 

Кроме того, я не вижу необходимости использовать функцию форматирования для меток.

Надеюсь, это поможет.