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
См. также: