javascript - 将数据转换为百分比 HighCharts

Question

我拥有的数据格式如下:

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

我的 Highcharts x 轴上的类别是:

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

我的代码现在显示一个条形图，其中 x 轴上有类别以及每个类别中不同项目的值。我想要的是相对百分比。这是什么意思，有没有一种方法可以让我确定每个类别的最高值，将该值设置为 100%，并将其他值相对于这个 100% 放置在该类别中？

我已经尝试过几次，但还没有成功。我也找不到这方面的好例子。

我现在拥有的代码接受绝对值并堆叠这些值，但这不是我想要的。

我将包含我的代码

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

第三，格式化标签、工具提示等，在本例中为值添加百分比符号，并在工具提示中设置点的绝对Y值。

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/