** ПРИМЕЧАНИЕ: ПРОЕКТ НА ОСНОВЕ ИНТРАНЕ
Проект, над которым я работаю, использует HighCharts для создания круговой диаграммы. Данные для этой круговой диаграммы динамически создаются путем запроса списка SharePoint с использованием REST API. У нас есть 9 диаграмм, которые создаются таким образом, и у 8 из них есть фильтр, применяемый для узких результатов к определенной группе, а не к Общему. Проблема заключается в том, что цвета для срезов несовместимы, поскольку значения не находятся в одном и том же порядке каждый раз, когда данные запрашиваются и собираются в нашем dataArray. То, что мы хотели бы попробовать, это присвоить цвет каждому значению данных, чтобы цвета оставались неизменными.
Например:
Resource = #123ABC
Lost Resource = #456DEF
User Error = #789GHI
Затем нам нужно было бы пропустить наш DataArray и применить эти значения к этому кусочку пирога, если он существует в этом наборе данных. Например, наш набор данных:
[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,
}]
});
}
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
}
}();
Вместо использования массива как точки используйте объект как точку, простые изменения:
countArray.push([currName, currValue]);
чтобы:
countArray.push({ name: currName, y: currValue, color: 'red' });
И второе изменение:
var newCount = countArray[j][1];
countArray[j][1] = newCount + currValue;
чтобы:
var newCount = countArray[j].y;
countArray[j].y = newCount + currValue;
var colorMap = {'User Error': 'red', 'Resource': 'green'}
, затем используйтеcountArray.push({ name: currName, y: currValue, color: colorMap[currName] });