Пользовательская функция в тепловой карте AM5, чтобы установить диапазон цветов для тепловой карты вместо двух (мин и ма ⇐ Jquery

[Anonymous]

Я создал функцию, которая генерирует тепловую карту на основе предоставленных данных JSON. Вариация цветов для точек данных в JSON должно следовать этим правилам: < /p>

Если вариация больше или равна +20% по сравнению с базовой линейкой, цвет должен варьироваться от светло -зеленого до темного зеленого. Изменение составляет от -20% и +20% по сравнению с базовой линией, цвет должен варьироваться от света до темного янтаря. Что я мог бы сделать не так? < /P>
var jsonData= [{ProcessedDate: '2025-03-31', AutomationName:
'AmitaVendorCancel', Total : 44, MovingAverage: 51}
{ProcessedDate: '2025-03-31', AutomationName: 'AmitaVendorRemoval', Total : 0, MovingAverage: 112.4}
{ProcessedDate: '2025-03-31', AutomationName: 'AthenaCoverage', Total : 914, MovingAverage: 20.71}
{ProcessedDate: '2025-03-31', AutomationName: 'AthenaSPU', Total : 1261, MovingAverage: 55.04}
{ProcessedDate: '2025-03-31', AutomationName: 'Auth Chase', Total : 3553, MovingAverage: 7.49}
{ProcessedDate: '2025-03-31', AutomationName: 'AuthCreate', Total : 10, MovingAverage: 1.47}
{ProcessedDate: '2025-03-31', AutomationName: 'AuthDetermination', Total : 21, MovingAverage: 2.69}
{ProcessedDate: '2025-03-31', AutomationName: 'AuthRequest', Total : 0, MovingAverage: 3.13}
{ProcessedDate: '2025-03-31', AutomationName: 'Auto Dialer', Total : 2409, MovingAverage: 91.03}
{ProcessedDate: '2025-03-31', AutomationName: 'AutomatedARFollowup', Total : 603, MovingAverage: 26.22}
{ProcessedDate: '2025-03-31', AutomationName: 'AutoshellingLite', Total : 45, MovingAverage: 6.98}
{ProcessedDate: '2025-03-31', AutomationName: 'Bank Downloads', Total : 6, MovingAverage: 1.02}
{ProcessedDate: '2025-03-31', AutomationName: 'Billing Edits', Total : 10065, MovingAverage: 15.63}
{ProcessedDate: '2025-03-31', AutomationName: 'ChargeEntry', Total : 0, MovingAverage: 13.74}
{ProcessedDate: '2025-03-31', AutomationName: 'Charity', Total : 180, MovingAverage: 3.66} ]

function generateVolumeVarianceHeatMap(jsonData, reportType, chartDivID) {//jsonData, reportType, chartDivID) {
// Create root element
var divId = chartDivID.replace("#", "");
disposeAllCharts(divId);
if (reportType == "DAILY") {
timeInterval = "day";
} else if (reportType == "WEEKLY") {
timeInterval = "week";
} else if (reportType == "MONTHLY") {
timeInterval = "month";
} else if (reportType == "YEARLY") {
timeInterval = "year";
}
var root = am5.Root.new(divId);
root._logo.dispose();
root.numberFormatter.setAll({
numberFormat: "#.00a",
numericFields: ["valueY"],
});
// Create modal for a "no data" note

// Set themes
root.setThemes([
am5themes_Animated.new(root)
]);

// Create chart
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "none",
wheelY: "none",
paddingLeft: 0,
layout: root.verticalLayout
}));

// Create axes and their renderers
var yRenderer = am5xy.AxisRendererY.new(root, {
visible: false,
minGridDistance: 5,
inversed: true,
minorGridEnabled: true
});
yRenderer.grid.template.set("visible", false);

var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
renderer: yRenderer,
categoryField: "AutomationName" // Automations name
}));

var xRenderer = am5xy.AxisRendererX.new(root, {
visible: false,
minGridDistance: 30,
opposite: true,
minorGridEnabled: true
});

xRenderer.grid.template.set("visible", false);
xRenderer.labels.template.setAll({
rotation: -50,
centerY: am5.p50
});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
renderer: xRenderer,
categoryField: "ProcessedDate" // Date, Week, Month, Year
}));

// Create series
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
calculateAggregates: true,
stroke: am5.color(0xffffff),
clustered: false,
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "ProcessedDate", // Date, Week, Month, Year
categoryYField: "AutomationName", // Automations name
valueField: "Total"
}));

series.columns.template.setAll({
tooltipText: "{value}",
strokeOpacity: 1,
strokeWidth: 2,
width: am5.percent(100),
height: am5.percent(100)
});

const minColor = am5.color(0x641220)
const maxColor = am5.color(0x081c15)
// Set up heat rules
series.set("heatRules", [{
target: series.columns.template,
dataField: "value",
key: "fill",
customFunction: function (sprite, min, max, value) {
var volumeVariance = (value - sprite._dataItem.dataContext.MovingAverage) * 100 / sprite._dataItem.dataContext.MovingAverage
if (value == 0) {
sprite.set("fill", am5.color(0xedf2f4)); // No data
} else if (volumeVariance >= 20) {
const spriteColor = am5.Color.interpolate(
volumeVariance,
am5.color(0xff4d6d),
am5.color(0x590d22)
)
sprite.set('fill', spriteColor)
} else if (volumeVariance -20 && volumeVariance < 20) {
const spriteColor = am5.Color.interpolate(
volumeVariance,
am5.color(0xffea00),
am5.color(0xff7b00)
)
sprite.set('fill', spriteColor)
}
}
}]);

// Set up data
if (!Array.isArray(jsonData)) {
document.getElementById(divId).innerHTML = "No Data Found,for selected filters.";
document.getElementById(divId).style = "min-height: 200px !important";
}
else {
updateChartHeight(jsonData, divId);
series.data.setAll(jsonData);
}

// Auto-populate X and Y axis category data
var automations = [];
var dates = [];
am5.array.each(jsonData, function (row) {
if (automations.indexOf(row.AutomationName) == -1) {
automations.push(row.AutomationName);
}
if (dates.indexOf(row.ProcessedDate) == -1) {
dates.push(row.ProcessedDate);
}
});

yAxis.data.setAll(automations.map(function (item) {
return { AutomationName: item }
}));

xAxis.data.setAll(dates.map(function (item) {
return { ProcessedDate: item }
}));

// Make stuff animate on load
chart.appear(1000, 100);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... instead-of