Stacking: String;
Свойство Stacking определяет тип накопления на диаграмме.
Значение свойства задаётся в конструкторе Chart, а возвращается с помощью метода getStacking.
Допустимые значения:
Absolute. Диаграмма отображает значения с накоплением, позволяя оценить вклад каждого значения в общую сумму;
None. По умолчанию. Диаграмма отображает абсолютные значения ряда;
Percent. Диаграмма отображает значения в процентном стиле, позволяя оценить долю каждого значения в общей сумме.
Для выполнения примера необходимо наличие на html-странице компонента Chart с наименованием «chart» (см. «Пример создания гистограммы»). Удалим гистограмму, создадим новую гистограмму с накоплениями, пересчитаем значения накоплений и выведем в консоль браузера некоторые из рассчитанных значений:
// Удаляем диаграмму
chart.dispose();
// Создаем массивы значений для рядов данных
var data0 = [10, 20, 30, 40, 50];
var data1 = [20, 30, 40, 50, 60];
var data2 = [30, 40, 50, 60, 70];
var data3 = [40, 50, 60, 70, 80];
var data4 = [50, 60, 70, 80, 90];
// Создаем массив с цветовыми значениями
var colors = ["rgb(192,217,253)", "rgb(163,200,252)", "rgb(134,183,251)",
"rgb(96,161,250)", "rgb(192,142,204)", "rgb(192,107,188)"
];
// Создаем новую диаграмму с накоплением
chart = chart = new PP.Ui.Chart({
Width: 500, // Ширина диаграммы
Height: 500, // Высота диаграммы
ParentNode: "chart", // Родительский элемент
Type: "Column", // Тип диаграммы
Stacking: "Absolute",
// Ряды данных
"Series": [{ // Ряд 1
"Name": "Австралия", // Наименование ряда
"Data": data0, // Массив значений
"Color": colors[0], // Цвет
"LineColor": colors[1], // Цвет линий
"LineWidth": 4 // Толщина линий
}, { // Ряд 2
"Name": "Азия",
"Data": data1,
"Color": colors[1],
"LineColor": colors[2],
"LineWidth": 4
}, { // Ряд 3
"Name": "Африка",
"Data": data2,
"Color": colors[2],
"LineColor": colors[3],
"LineWidth": 4
}, { // Ряд 4
"Name": "Европа",
"Data": data3,
"Color": colors[3],
"LineColor": colors[4],
"LineWidth": 4
}, { // Ряд 5
"Name": "С. Америка",
"Data": data4,
"Color": colors[4],
"LineColor": colors[5],
"LineWidth": 4
}],
// Ось категорий
"XAxis": {
"Categories": ["2001", "2002", "2003", "2004", "2005"], // Массив категорий
"Labels": {
"Enabled": true
} // Настройки подписей
},
// Ось значений
"YAxis": {
"Labels": {
"Enabled": true
} // Настройки подписей
},
// Дополнительная ось значений
"YSAxis": {
"Enabled": false // Признак активности оси
},
// Область отрисовки диаграммы
"PlotArea": {},
// Легенда диаграммы
"Legend": {},
// Заголовок диаграммы
"Title": {
"Text": "Диаграмма"
}
});
// Удаляем легенду
chart.getLegend().dispose();
// Пересчитываем накопления диаграммы
chart.getSeriesStacks("column");
// Получаем рассчитанные значения накоплений диаграммы
var stackExtrems = chart.getStackExtrems();
// Выводим в консоль браузера рассчитанное значение для первой точки оси X
console.log("Сумма значений для категории «" + chart.getXAxis().getCategories()[0] + "»: " + stackExtrems.Primary[0].sum);
// Выводим в консоль браузера значения полей max и min массива Primary
var primary = stackExtrems.Primary;
console.log("Максимальное значение: " + primary.max);
console.log("Минимальное значение: " + primary.min);
В результате выполнения примера на экране была отображена новая гистограмма с накоплениями:
В консоли браузера была выведена сумма значений для категории «2001», а также максимальное и минимальное значения рядов данных с учетом накоплений:
Сумма значений для категории «2001»: 150
Максимальное значение: 350
Минимальное значение: 10
См. также: