JQWidget 원형 차트에 배열을 추가하는 방법은 무엇입니까?

Question

원형 차트 JQWidget을 사용하려고합니다. 초기 예제는 텍스트 파일에 있지만 차트에서 자체 값을 사용하고 싶습니다. 원형 차트를 만들기 위해 최대 100 개를 추가 할 4 개의 섹션 (A, B, C, Unknown)이 있습니다.

카테고리 A는

분류 B는

분류 C는 CPercent의 값을 갖는다 BPercent의 값을 갖는다 APercent의 값을 갖는다

카테고리 불명 내가

UKPercent

의 값을 갖는다 모든 값을 원형 차트에 추가하려고했습니다. 현재 내 차트는 이름이없는 네 개의 범례를로드하고 카테고리 중 하나만로드합니다.

var bigPie = []; 


     bigPie.push({ 
     A: APercent 
     }); 
     bigPie.push({ 
     B: BPercent 
     }); 
     bigPie.push({ 
     C: CPercent 
     }); 
     bigPie.push({ 
     Unknown: UKPercent 
     }); 





$(document).ready(function() { 

// prepare chart data as an array 
      // prepare jqxChart settings 
      var settings = { 
       title: "Information", 
       description: "Legs", 
       enableAnimations: true, 
       showLegend: true, 
       showBorderLine: true, 
       legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' }, 
       padding: { left: 5, top: 5, right: 5, bottom: 5 }, 
       titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, 
       source: bigPie, 

       colorScheme: 'scheme03', 
       seriesGroups: 
        [ 
         { 
          type: 'pie', 
          showLabels: true, 
          series: 
           [ 
            { 
             dataField: ‘A', 
             displayText: ‘%', 
             labelRadius: 170, 
             initialAngle: 15, 
             radius: 145, 
             centerOffset: 0, 
             formatFunction: function (value) { 
              if (isNaN(value)) 
               return value; 
              return parseFloat(value) + '%'; 
             }, 
            } 
           ] 
         } 
        ] 
      }; 

어떤 도움이나 제안

주시면 감사하겠습니다. 미리 감사드립니다. 내가 뭔가 명확하지 않거나 너무 모호하다면 알려주십시오. 다시 감사합니다!

Answer 1

먼저 배열에는 최소한 2 개의 속성이있는 객체가 있어야합니다. 라벨 용 하나 (A, B, C는, 귀하의 경우 D) 하고 (검색 경우 APercent, BPercent, CPercent, UKPercent) 값의 다른 는 다음과 같다 ..

var bigPieTobe = [ 
    {category:"A", percent: 20} 
    , {category:"B", percent: 30} 
    , {category:"C", percent: 40} 
    , {category:"Unknown", percent: 10} 
]; 

둘째, jqxChart에 어떤 속성이 어떤 카테고리이고 어떤 것이 값인지 알려줘야합니다. 여기에 결과 http://jsfiddle.net/znwua337/1/

을 볼 수 있습니다

// prepare chart data as an array 
var bigPieTobe = [ 
    {category:"A", percent: 20} 
    , {category:"B", percent: 30} 
    , {category:"C", percent: 40} 
    , {category:"Unknown", percent: 10} 
]; 

// prepare jqxChart settings 
var settings = { 
    title: "Information", 
    description: "Legs", 
    enableAnimations: true, 
    showLegend: true, 
    showBorderLine: true, 
    legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' }, 
    padding: { left: 5, top: 5, right: 5, bottom: 5 }, 
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, 
    source: bigPieTobe, 

    colorScheme: 'scheme03', 
    seriesGroups: 
    [ 
     { 
      type: 'pie', 
      showLabels: true, 
      series: 
      [ 
       { 
        dataField: 'percent', 
        displayText: 'category', 
        labelRadius: 170, 
        initialAngle: 15, 
        radius: 145, 
        centerOffset: 0, 
        formatFunction: function (value) { 
         if (isNaN(value)) 
          return value; 
         return parseFloat(value) + '%'; 
        } 
       } 
      ] 
     } 
    ] 
}; 
$("#jqxChart").jqxChart(settings); 

전체 소스 코드는 다음과 같이 될 것이다

  dataField: 'percent', 
      displayText: 'category', 

...