高图表自动计算多个系列位置

Question

实际上，我有一个包含多个系列数据的饼图，每个饼图都由饼图表示(请参阅JSFiddle链接)。

我正在寻找一种方法来实现一个“自动”计算的最佳大小为每个饼图和一个最优的位置，以使他们在一个单一的容器在一个通用的方式。

实际上，我已经想出了一个解决方案，但实际上并不是最优的。

要么是我不明白在生成图表时，高图表是如何工作的，要么是我的系统能够进行计算，或者两者兼而有之。

请注意，发电机只工作1至6个不同系列的数据，如果使用更多的系列，它将无法得到的位置，因为我没有做的计算。

此外，它实际上被证实只在这些大小的容器上工作：

• 宽度:340高度:170
• 宽度:680高度:170

在高度或宽度较高的集装箱上，系统将无法计算位置。

这实际上是为什么我来寻找关于如何获得最佳和通用位置计算器的想法的一部分。

下面是我附带的代码和代码示例后面的JSFiddle链接。

// Pie Chart Class
var pieChart = {
    create: function(_title, _data, _color, _height, _width) {
        return (function() {

            var type = 'pie';
            var title = _title || "defaultName";
            var color = _color || "#EBEBEB";
            var height = _height || 170;
            var width = _width || 340;
            var series = [];
            var chart;
            var sizeData = getSize(height, width);
            if (_data)
                newSeries(_data);

            // Public functions
            function newSeries(_data) {
                var _datas = [];

                for (var dataSet in _data) {
                    if (_data.hasOwnProperty(dataSet) && (color != null && color != undefined)) {
                        _datas.push({
                            name: dataSet,
                            y: _data[dataSet],
                        });
                    }
                }

                series.push({
                    data: _datas,
                    borderWidth: 0,
                    center: []
                });
                setPos(series.length);
            }

            function Series() {
                return (JSON.stringify(series));
            }

            function drawOn(item) {
                if (!item || !document.getElementById(item) && !chart)
                    return (null);
                else {
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: item,
                            backgroundColor: color,
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                        },
                        title: {
                            text: title
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: false,
                                borderWidth: 0,
                                dataLabels: {
                                    distance: -1,
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.y}',
                                    style: {
                                        color: 'black'
                                    }
                                },
                                size: sizeData.size
                            }
                        },
                        series: JSON.parse(Series())
                    });
                }
            }

            // Private functions
            function setPos(_len) {
                if (_len == 1)
                    series[0].center = [sizeData.center, sizeData.h];
                else if (_len == 2) {
                    series[0].center = [sizeData.second, sizeData.h];
                    series[1].center = [sizeData.fourth, sizeData.h];
                } else if (_len == 3) {
                    series[0].center = [sizeData.w1, sizeData.h];
                    series[1].center = [sizeData.center, sizeData.h];
                    series[2].center = [sizeData.w6, sizeData.h];
                } else if (_len == 4) {
                    series[0].center = [(sizeData.w1 + sizeData.w2) / 2, sizeData.h];
                    series[1].center = [sizeData.w3, sizeData.h];
                    series[2].center = [(sizeData.w4 + sizeData.w5) / 2, sizeData.h];
                    series[3].center = [sizeData.w6, sizeData.h];
                } else if (_len == 5) {
                    series[0].center = [sizeData.w1, sizeData.h];
                    series[1].center = [sizeData.second, sizeData.h];
                    series[2].center = [sizeData.center, sizeData.h];
                    series[3].center = [sizeData.fourth, sizeData.h];
                    series[4].center = [sizeData.w6, sizeData.h];
                } else if (_len == 6) {
                    series[0].center = [sizeData.w1, sizeData.h];
                    series[1].center = [sizeData.w2, sizeData.h];
                    series[2].center = [sizeData.w3, sizeData.h];
                    series[3].center = [sizeData.w4, sizeData.h];
                    series[4].center = [sizeData.w5, sizeData.h];
                    series[5].center = [sizeData.w6, sizeData.h];
                }
            }

            function getSize(height, width) {
                var nbChart = 6;
                var diam;
                var tmpWidth = width - 30;
                if (nbChart == 1)
                    diam = height - ( height / 3);
                else {
                    diam = (tmpWidth - (tmpWidth / nbChart)) / nbChart;
                }
                var test = (tmpWidth - (diam * nbChart));
                var h = ((height - diam) / 2) / 2;
                var w = diam + (test / (nbChart * 2));
                var decal;
                if (width >= 680)
                    decal = test / 10;
                else
                    decal = 0;
                return {
                    width: width,
                    height: height,
                    size: diam,
                    h: h,
                    w1: ((diam / 2) + decal),
                    w2: (((w) + diam / 2) + decal),
                    w3: (((w * 2) + diam / 2) + decal),
                    w4: (((w * 3) + diam / 2) + decal),
                    w5: (((w * 4) + diam / 2) + decal),
                    w6: (((w * 5) + diam / 2) + decal),
                    center: (((((w * 2) + diam / 2) + decal) + (((w * 3) + diam / 2) + decal)) / 2),
                    second: (((diam / 2) + decal) + (((((w * 2) + diam / 2) + decal) + (((w * 3) + diam / 2) + decal)) / 2)) / 2,
                    fourth: ((((((w * 2) + diam / 2) + decal) + (((w * 3) + diam / 2) + decal)) / 2) + (((w * 5) + diam / 2) + decal)) / 2
                }
            }

            return {
                Series: Series,
                drawOn: drawOn,
                newSeries: newSeries
            }
        })();
    }
};

var crPie = pieChart.create('Test', {T1: 500, T2: 700}, "#EBEBEB", 170, 680);
crPie.newSeries({T1: 700, T2: 800});
crPie.drawOn('container');

(以下是JSFiddle链接：https://jsfiddle.net/jcL0wuwp/)

我做了多次调查，通过互联网，但没有找到我正在寻找的，一种获得最佳的位置和大小的数据系列。

(我知道代码的某些部分不是最优的，但我的问题不是如何在JS中优化或使用类，尽管我没有提出建议。)

Answer 1

我会改变一下你的想法，定位你的派系列。我更喜欢包装use图表的getCenter方法，因此可以使用响应性图表：

(function(H) {
    H.wrap(H.Chart.prototype, 'addSeries', function(proceed, options, redraw, animation) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      var chart = this;
      Highcharts.each(chart.series, function(s) {
        s.isDirty = true;
      });
      chart.redraw();
    });

    H.wrap(H.seriesTypes.pie.prototype, 'getCenter', function(proceed) {
      var series = this,
        chart = series.chart,
        width = chart.chartWidth,
        height = chart.chartHeight,
        numberOfSeries = chart.series.length,
        index = series._i,
        initialSize, size, centerY = height / 2,
        centerX;
      centerX = (index + 1) * (width / (numberOfSeries + 1));
      initialSize = width / (numberOfSeries + 1);
      size = initialSize > height ? height : initialSize;
      return [centerX, centerY, size, 0]
    });
  }(Highcharts));

我用数列来计算你饼系列的新尺寸和中心位置。我已经更改了addSeries方法，所以您也可以添加自定义饼系列。

在这里，您可以找到一个如何工作的示例：http://jsfiddle.net/oohn3q22/6/