Question

我拥有的数据格式如下：

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

我的高潮图的xAxis上的cateogries是：

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

我的代码现在显示了一个条形图，其中包含xAxis上的类别以及每个catergory中不同项目的值。我想要的是相对百分比。是什么意思，有没有一种方法，每个类别我确定最高值，将该值设置为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
      };
    })
  }  
});

第三步，格式化标签，工具提示等，在这种情况下，将百分比符号添加到值，并在工具提示中设置点的绝对值。

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％），请更改系列对象中的数据，如下所示 -

var classSelector = "+category1+author3".replace(/\+/g, ", .");

$( classSelector ).fadeOut();

例如 -

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]

    }]

另外，我还没有看到标签需要格式化功能。

希望这有帮助。

将数据转换为百分比HighCharts

2 个答案: