Highcharts 자동으로 여러 개의 계열 위치 계산

Question

실제로 원형 차트 (JSFiddle 링크 참조)로 표시되는 여러 개의 데이터 시리즈가있는 원형 차트가 있습니다.

각 원형 차트 및 최적 위치의 최적 크기를 "자동"으로 계산하여 모든 것을 단일 컨테이너로 렌더링하는 방법을 찾고 있습니다.

나는 실제적으로 해결책의 시작을 생각해 냈지만 실제로는 최적이 아닙니다.

차트를 생성 할 때 Highchart가 작동하는 방식을 이해하지 못했거나 시스템에서 계산을하거나 둘 다 알 수없는 값이 많습니다.

더 많은 시리즈를 사용하는 경우 1에서 6 개의 다른 계열의 데이터에 대해서만 생성기가 작동한다는 점에 유의하십시오. 계산을하지 않았으므로 게재 위치를 얻지 못할 수 있습니다.

또한 actualy 만 이러한 크기의 용기에서 작동 확인 같습니다

• 폭 : 340px 신장 170px
• 폭 : 680 픽셀 높이 170px highter 폭 용기에

또는 높이를 지정하면 시스템이 위치를 계산하지 못합니다.

사실 내가 최적이고 일반적인 위치 계산기를 얻는 방법에 대한 아이디어를 찾은 이유 중 일부입니다.

코드 샘플 다음에 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'); 

은 (https://jsfiddle.net/jcL0wuwp/ 여기 JSFiddle 링크입니다).

(I 코드의 일부가 optimals 아니라 내 quetion 내가 agaisnt 조언 모르겠지만 JS에 최적화하거나 사용하는 클래스를하는 방법에 대해 아니라는 것을 알고.)

Answer 1

내가 조금 당신의 생각을 바꿀 것입니다 파이 시리즈 포지셔닝. 나는 Higcharts의 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/