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

debugcn 发表于 Dev

电子电路

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

因此，我想在饼图本身上对它进行排序，例如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 });
    });
});

}）;

pot

在装入事件中，您可以创建一个具有排序值的新数据数组，并使用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。