如何按切片值从最小值到最大值对 highchart pie jasperstudio 进行排序

Question

我正在使用 jasper，但我不想像使用相同查询的报告的许多其他元素一样对查询中的数据进行排序。

所以我想在饼图本身上对其进行排序，以此作为示例 fiddle http://jsfiddle.net/highcharts/3bDMe/1/。没有按钮点击怎么办？我的意思是当图表加载时，它会自动按切片值升序排序。

$(function () {
$(document).ready(function () {

    // Build the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       6.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    88.5],
                ['Opera',     26.2],
                ['Others',   30.7]
            ]
        }]
    });

    $('#sort').click(function() {
        chart.series[0].data.sort(function(a, b) {
            return b.y - a.y;
        });

        var newData = {};

        for (var i = 0; i < chart.series[0].data.length; i++) {
            newData.x = i;
            newData.y = chart.series[0].data[i].y;
            newData.color = Highcharts.getOptions().colors[i];

            chart.series[0].data[i].update(newData, false);

            // Workaround:
            chart.legend.colorizeItem(chart.series[0].data[i], chart.series[0].data[i].visible);
        }

        chart.redraw({ duration: 2000 });
    });
});

});

Answer 1

在加载事件中，您可以创建一个具有排序值的新数据数组，并使用 setData 方法应用更改：

chart: {
    ...,
    events: {
        load: function() {
            var data = this.series[0].data,
                newData = [];

            data.forEach(function(point) {
                newData.push({
                    y: point.y,
                    name: point.name
                })
            });

            newData.sort(function(a, b) {
                return a.y - b.y;
            });

            this.series[0].setData(newData);
        }
    }
}

现场演示： http://jsfiddle.net/BlackLabel/6vzd8ak7/

API参考：https://api.highcharts.com/class-reference/Highcharts.Series#setData

如何按切片值从最小值到最大值对 highchart pie jasperstudio 进行排序

How to sort order highchart pie jasperstudio by slice value min to max

jasper-reports

highcharts

pie-chart