Highcharts - 데이터가 동적 인 경우 특정 값으로 색상을 지정

Question

** 참고 : 인트라넷 기반 프로젝트

이

내가 맡은 프로젝트는 파이 차트를 생성하는 HighCharts를 사용합니다. 이 파이 차트의 데이터는 REST API를 사용하여 SharePoint 목록을 쿼리하여 동적으로 생성됩니다. 이 방법으로 총 9 개의 차트가 생성되며, 그 중 8 개의 차트가 전체적으로가 아니라 특정 그룹으로 좁은 결과에 적용됩니다. 문제는 데이터가 쿼리되고 dataArray로 어셈블 될 때마다 값이 같은 순서가 아니기 때문에 슬라이스의 색상이 일치하지 않는다는 것입니다. 우리가 시도하고 싶은 것은 각 데이터 포인트 값에 색상을 할당하여 색상의 일관성을 유지하는 것입니다. 예를 들어

: 우리는 다음 우리의 DataArray을 통해 루프를 필요로하고, 그 데이터 세트에서 존재하는 경우, 그 원형 조각에 그 값을 적용 할

Resource = #123ABC 
Lost Resource = #456DEF 
User Error = #789GHI 

. 우리의 데이터는 동적

다시

[Resource, 81.6],[Lost Resource, 1.0],[User Error, 0.01] 

그래서 우리의 실제 일련의 코드는 다음과 같습니다 :

: 아래

---

series: [{ 
      type: 'pie', 
      name: chartTitle, 
      data: countArray, 
     }] 

우리가 작업하고있는 전체 코드입니다 우리의 데이터 세트는, 예를 들면

Utility.js 파일 (데이터를 countArray로 처리)

"use strict"; 

var EngagementChartBuilder = window.EngagementChartBuilder || {}; 

EngagementChartBuilder.Utilities = function() { 
var buildCategoryCounts = function (countArray, dataArray) { 
    if (countArray == undefined) { 
     countArray = []; 
    } 

    for (var i = 0; i < dataArray.length; i++) { 
     var currValue = parseInt(dataArray[i].hours); 
     var currName = dataArray[i].reason; 
     var found = false; 
     for (var j = 0; j < countArray.length; j++) { 
      if (countArray[j][0] == currName) { 
       found = true; 
       var newCount = countArray[j][1]; 
       countArray[j][1] = newCount + currValue; 
      } 
     } 
     if (!found) { 
      countArray.push([currName, currValue]); 
     } 
    } 

    return countArray; 
}, 

loadPieChart = function (countArray, colorArray, divId, chartTitle) { 
    //Build Pie Chart 
    Highcharts.setOptions({ 
    }) 
    $(divId).highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      backgroundColor:'rgba(255, 255, 255, 0.1)' 
     }, 
     credits: { 
      enabled: false 
     }, 
     colors: colorArray, 

     legend: { 
      layout: 'horizontal', 
     }, 
     title: { 
      text: chartTitle 
     }, 
     tooltip: { 
      pointFormat: '<b>{point.y} hours</b>', 
      percentageDecimals: 0 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b> {point.percentage:.1f} %' 
       }, 
       showInLegend: true 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: chartTitle, 
      data: countArray, 
     }] 
    }); 
} 

,363,210

---

ViewModel.js REST QUERY

if (!Array.prototype.filter) { 
Array.prototype.filter = function (fun /*, thisp */) { 
    "use strict"; 

    if (this == null) 
     throw new TypeError(); 

    var t = Object(this); 
    var len = t.length >>> 0; 
    if (typeof fun != "function") 
     throw new TypeError(); 

    var res = []; 
    var thisp = arguments[1]; 
    for (var i = 0; i < len; i++) { 
     if (i in t) { 
      var val = t[i]; // in case fun mutates this 
      if (fun.call(thisp, val, i, t)) 
       res.push(val); 
     } 
    } 

    return res; 
}; 
} 

"use strict"; 

var EngagementChartBuilder = window.EngagementChartBuilder || {}; 

EngagementChartBuilder.EngagementsPieChart_COR = function() { 
var load = function() { 
    $.when(
     //Empire Engagements List 
     EngagementChartBuilder.RESTQuery.execute("QA_TimeMgtPerRelease", "$select=*,ProjectRelease/CALCReportGroup,Reason_x0020_Type,CalculatedSubtotal&$filter=(((Reason_x0020_Type%20ne%20'Weekend%20Hours')%20and%20(Reason_x0020_Type%20ne%20'After%20Hours'))%20and%20(ProjectRelease/CALCReportGroup%20eq%20'COR'))&$top=2000") 
    ).done(
     function (engagements1) { 
      var dataArray = []; 
      var countArray = []; 

      //Get data from Empire Engagements List 
      var results = engagements1.d.results; 
      var filtered = []; 
      for (var i = 0; i < results.length; i++) { 
       if (results[i].ProjectRelease/CALCReportGroup == 'COR') { 
        filtered.push(results[i]); 
       } 
      } 
      for (var i = 0; i < filtered.length; i++) { 
       var reason = filtered[i].Reason_x0020_Type; 
       var hours = filtered[i].CalculatedSubtotal; 
       dataArray[i] = { 'hours': hours, 'reason': reason }; 
      } 

      countArray = EngagementChartBuilder.Utilities.buildCategoryCounts(countArray, dataArray); 

      //Build Chart 
      EngagementChartBuilder.Utilities.loadPieChart CountArray, "#engagementPieChart_COR", "Testing Time vs. Time Lost (COR)"); 
     } 
    ).fail(
     function (engagements1) { 
      $("#engagementPieChart_COR").html("<strong>An error has occurred.</strong>"); 
     } 
    ); 
}; 

return { 
    load: load 
} 
}();  

Answer 1

대신 지점으로하여 배열 지점으로 사용할 객체 간단한 변경 :

countArray.push([currName, currValue]); 

행 :

countArray.push({ name: currName, y: currValue, color: 'red' }); 

둘째 변경 :

에

:

var newCount = countArray[j].y; 
countArray[j].y = newCount + currValue;