Настройка осей диаграмм в презентациях с использованием JavaScript

О чём эта страница

Узнайте, как использовать JavaScript с Aspose.Slides для Node.js через Java, чтобы настраивать оси диаграмм в презентациях PowerPoint для отчетов и визуализации.

Обзор

В этой статье объясняется, как настраивать оси диаграмм с помощью Aspose.Slides для Node.js через Java. Рассматриваются вычисляемые значения осей, переключение строк и столбцов диаграммы, видимость осей, интервалы меток категорий и делений, даты категорий и их форматирование, угол наклона заголовка, позиционирование осей, единицы отображения и логарифмическое масштабирование.

Получить максимальные значения на вертикальной оси диаграмм

Создайте Презентацию и добавьте областную диаграмму с данными по умолчанию. Вызовите validateChartLayout перед чтением вычисленных значений осей, чтобы макет диаграммы был актуален.

Читайте getActualMaxValue и getActualMinValue для пределов оси, а также getActualMajorUnit и getActualMinorUnit для интервалов делений. getActualMajorUnitScale и getActualMinorUnitScale предоставляют масштаб единиц времени, что актуально для осей дат. Пример сохраняет эти значения в локальные переменные и сохраняет диаграмму.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Area, 100, 100, 500, 350);
    chart.validateChartLayout();

    var maxValue = chart.getAxes().getVerticalAxis().getActualMaxValue();
    var minValue = chart.getAxes().getVerticalAxis().getActualMinValue();

    var majorUnit = chart.getAxes().getVerticalAxis().getActualMajorUnit();
    var minorUnit = chart.getAxes().getVerticalAxis().getActualMinorUnit();

    var majorUnitScale = chart.getAxes().getVerticalAxis().getActualMajorUnitScale();
    var minorUnitScale = chart.getAxes().getVerticalAxis().getActualMinorUnitScale();

    presentation.save("AxisValues_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Поменять данные между осями

Используйте switchRowColumn для обмена ролями рядов и категорий в данных диаграммы. Каждая прежняя категория становится рядом, а каждый прежний ряд — категорией. Это меняет группировку данных; оси не меняются местами. В примере применяется setRange для привязки данных по умолчанию к Sheet1!A1:D5, включая строку заголовков и столбец категорий, перед переключением строк и столбцов. Сохраняется диаграмма с четырьмя рядами и тремя категориями.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 100, 400, 300);
    chart.getChartData().setRange("Sheet1!A1:D5");
    chart.getChartData().switchRowColumn();

    presentation.save("SwitchChartRowColumns_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Отключить вертикальную ось для линейных диаграмм

Вызовите setVisible с параметром false у вертикальной оси, чтобы скрыть её. В примере создаётся линейная диаграмма с данными по умолчанию и сохраняется с скрытой вертикальной осью.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
    chart.getAxes().getVerticalAxis().setVisible(false);

    presentation.save("HiddenVerticalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Отключить горизонтальную ось для линейных диаграмм

Вызовите setVisible с параметром false у горизонтальной оси, чтобы скрыть её. В примере создаётся линейная диаграмма с данными по умолчанию и сохраняется с скрытой горизонтальной осью.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
    chart.getAxes().getHorizontalAxis().setVisible(false);

    presentation.save("HiddenHorizontalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Изменить категориальную ось

Используйте setCategoryAxisType для выбора датированной или текстовой категориальной оси. Этот пример требует файл ExistingChart.pptx, где первая фигура на первом слайде — диаграмма, а ячейки категорий содержат числовые значения дат Excel. Он меняет горизонтальную ось на датированную. Вызов setAutomaticMajorUnit с false, setMajorUnit с 1 и setMajorUnitScale с TimeUnitType.Months размещает основные деления через один месяц.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation("ExistingChart.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().get_Item(0);
    chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
    chart.getAxes().getHorizontalAxis().setAutomaticMajorUnit(false);
    chart.getAxes().getHorizontalAxis().setMajorUnit(1);
    chart.getAxes().getHorizontalAxis().setMajorUnitScale(aspose.slides.TimeUnitType.Months);

    presentation.save("ChangeChartCategoryAxis_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Управление интервалами меток категориальной оси

Когда диаграмма содержит много категорий, уменьшите количество видимых меток оси, не удаляя категории и точки данных. Вызовите setAutomaticTickLabelSpacing с false, затем передайте желаемый интервал категорий в setTickLabelSpacing. Для текстовых категорий в их обычном порядке подсчёт начинается с первой категории:

Интервал	Метки, отображаемые в примере
1	Категория 1, Категория 2, Категория 3, … Категория 24
2	Категория 1, Категория 3, Категория 5, … Категория 23
3	Категория 1, Категория 4, Категория 7, … Категория 22

Интервал 3 отображает каждую третью метку, оставляя две метки скрытыми между отображаемыми. Колонки при этом не удаляются. Автоматический выбор интервала основывается на доступном пространстве; он не обязан отображать каждую метку.

Для делений существуют отдельные параметры. Вызовите setAutomaticTickMarksSpacing с false и используйте setTickMarksSpacing для задания их интервала. Например, 1 оставит деление у каждой категории, тогда как метки будут показываться только каждые три категории. Примените setMajorTickMark с видимым стилем, чтобы увидеть результат. Повторный вызов любого из автоматических методов с true вновь вернёт автоматический выбор.

Самостоятельный пример создаёт 24 категории и один ряд, затем сохраняет три слайда в CategoryAxisIntervals.pptx: автоматический интервал, ручной интервал меток с независимыми делениями и восстановление автоматического режима. Две копии сохраняют исходные данные диаграммы. Исходная презентация не требуется. Горизонтальный текст меток хорошо демонстрирует разницу в плотности.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 30, 40, 660, 320);

    chart.setLegend(false);
    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.ClusteredColumn);
    for (var i = 0; i < 24; i++) {
        var categoryCell = workbook.getCell(0, i + 1, 0, "Category " + (i + 1));
        chart.getChartData().getCategories().add(categoryCell);
        var valueCell = workbook.getCell(0, i + 1, 1, 10 + i % 6 * 5);
        series.getDataPoints().addDataPointForBarSeries(valueCell);
    }

    var axis = chart.getAxes().getHorizontalAxis();
    axis.setCategoryAxisType(aspose.slides.CategoryAxisType.Text);
    axis.getTextFormat().getTextBlockFormat().setRotationAngle(0);
    axis.getTextFormat().getPortionFormat().setFontHeight(12);
    axis.setMajorTickMark(aspose.slides.TickMarkType.Outside);
    axis.setAutomaticTickLabelSpacing(true);
    axis.setAutomaticTickMarksSpacing(true);

    // Слайд 2: показывать каждую третью метку, но оставлять деление для каждой категории.
    var manualSlide = presentation.getSlides().addClone(slide);
    var manualChart = manualSlide.getShapes().get_Item(0);
    var manualAxis = manualChart.getAxes().getHorizontalAxis();
    manualAxis.setAutomaticTickLabelSpacing(false);
    manualAxis.setTickLabelSpacing(3);
    manualAxis.setAutomaticTickMarksSpacing(false);
    manualAxis.setTickMarksSpacing(1);

    // Слайд 3: позволить диаграмме снова выбрать оба интервала.
    var restoredSlide = presentation.getSlides().addClone(manualSlide);
    var restoredChart = restoredSlide.getShapes().get_Item(0);
    restoredChart.getAxes().getHorizontalAxis().setAutomaticTickLabelSpacing(true);
    restoredChart.getAxes().getHorizontalAxis().setAutomaticTickMarksSpacing(true);

    presentation.save("CategoryAxisIntervals.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Автоматическое размещение (слайд 1): В этом варианте каждая вторая метка категории отображается и переносится на две строки. Автоматический результат может различаться в зависимости от размера диаграммы, шрифтов и рендерера.

Ручное размещение (слайд 2): Каждая третья метка отображается в одну строку, при этом деления остаются у каждой категории. Все 24 столбца, включая те, у которых нет меток, остаются видимыми с теми же значениями. Слайд 3 восстанавливает автоматический вид, показанный выше.

Выбор правильной оси и интервала

Используйте этот интервал количества категорий для текстовой категориальной оси, например, у столбчатой, линейной, областной или гистограммной диаграммы. В столбчатой диаграмме это горизонтальная ось. В горизонтальной гистограмме категориальная ось вертикальна, поэтому применяйте эти параметры к оси, возвращаемой методом getVerticalAxis. Интервал делений также относится к оси рядов в диаграммах, где она присутствует.

Не используйте интервал меток категории для задания числовой шкалы значимой оси. На значимой оси метод setMajorUnit задаёт разницу в значениях: например, основной шаг 10 создаёт деления 0, 10, 20 и т.д., если ось начинается с нуля. Интервал меток категории 3 же считает позиции категорий независимо от их значений. Диаграммы разброса и пузырьковые используют значимые оси, а не текстовую категориальную. Для датированной оси используйте временные основные шаги и масштабы, как описано в разделе Изменить категориальную ось.

Установить формат даты для значений категориальной оси

В примере заменяется набор данных диаграммы на четыре годовых значения. Даты хранятся как серийные числа OLE Automation в первом листе (индекс 0), вычисляемые как количество дней, прошедших с 30 декабря 1899. В JavaScript расчёт использует метки времени UTC и делит разницу на 86 400 000 мс в день. Вызовите setCategoryAxisType с параметром CategoryAxisType.Date, затем setNumberFormatLinkedToSource с false и передайте yyyy в setNumberFormat, чтобы метки категорий отображали четырехзначный год независимо от формата ячеек.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 50, 50, 450, 300);

    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var baseDate = Date.UTC(1899, 11, 30);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Line);
    for (var i = 0; i < 4; i++) {
        var date = Date.UTC(2015 + i, 0, 1);
        var categoryCell = workbook.getCell(0, i + 1, 0, (date - baseDate) / 86400000);
        chart.getChartData().getCategories().add(categoryCell);

        var valueCell = workbook.getCell(0, i + 1, 1, i + 1);
        series.getDataPoints().addDataPointForLineSeries(valueCell);
    }

    chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
    chart.getAxes().getHorizontalAxis().setNumberFormatLinkedToSource(false);
    chart.getAxes().getHorizontalAxis().setNumberFormat("yyyy");

    presentation.save("DateAxisFormat.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Установить угол вращения заголовка оси диаграммы

Вызовите setTitle с true у вертикальной оси, задайте текст заголовка и используйте setRotationAngle для поворота заголовка. Угол измеряется в градусах; пример сохраняет столбчатую диаграмму с заголовком оси значений, повернутым на 90 градусов.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getVerticalAxis().setTitle(true);
    chart.getAxes().getVerticalAxis().getTitle().addTextFrameForOverriding("Value");
    chart.getAxes().getVerticalAxis().getTitle().getTextFormat().getTextBlockFormat().setRotationAngle(90);

    presentation.save("RotatedAxisTitle.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Установить позицию оси на категориальной или значимой оси

Примените setAxisBetweenCategories для управления тем, пересекает ли значимая ось категориальную ось между категориями или на отметках делений. Этот параметр относится к категориальным осям. Пример ставит его в true на горизонтальной категориальной оси столбчатой диаграммы и сохраняет результат.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getHorizontalAxis().setAxisBetweenCategories(true);

    presentation.save("AxisBetweenCategories.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Установить единицу отображения на значимой оси диаграммы

Используйте setDisplayUnit для масштабирования меток значимой оси без изменения исходных данных. При параметре DisplayUnitType = Millions значение 60 000 000 отображается как 60. Пример создаёт столбчатую диаграмму и применяет единицу «миллионы» к её вертикальной оси.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getVerticalAxis().setDisplayUnit(aspose.slides.DisplayUnitType.Millions);

    presentation.save("Result.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Настроить логарифмическую значимую ось

Логарифмическая значимая ось полезна, когда положительные значения охватывают несколько порядков величины. Например, сервис может получать 10, 100, 1 000, 10 000 и 100 000 запросов за пять периодов. На линейной шкале небольшие значения находятся близко к нулю. Логарифмическая шкала упрощает сравнение их относительного роста: одинаковые расстояния представляют одинаковые отношения, а не одинаковые разности.

Вызовите setLogarithmic с true у значимой оси и используйте setLogBase для выбора основания. Это меняет только отображение существующих значений; данные и добавление логарифмической линии тренда не изменяются. Линия тренда — отдельная функция, представляющая аппроксимирующее соотношение в данных.

Выбор значимой оси и основания

Для линейной или столбчатой диаграммы значимая ось возвращается методом getVerticalAxis. Для горизонтальной гистограммы — методом getHorizontalAxis. Диаграммы разброса и пузырьковые имеют две значимые оси, поэтому выбирайте горизонтальную ось для значений X, вертикальную — для Y, либо обе. Не применяйте логарифмическое масштабирование к категориальной оси.

Основание логарифма по умолчанию = 10. Для PPTX‑диаграмм допускаются основания от 2 до 1000 включительно; поддерживаются и дробные основания, такие как 2.5. При основании 10 последовательные степени — 10, 100, 1 000, 10 000 — расположены равномерно.

Сравнение линейного и логарифмического масштабирования

Самостоятельный пример создаёт линейную диаграмму с пятью количествами запросов на первом слайде, затем клонирует этот слайд и включает логарифмическую значимую ось с основанием 10 на втором. Оба слайда сохраняют одинаковые данные.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 30, 40, 660, 200);

    chart.setLegend(false);

    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Line);
    var values = [10, 100, 1000, 10000, 100000];

    for (var i = 0; i < values.length; i++) {
        var categoryCell = workbook.getCell(0, i + 1, 0, "Period " + (i + 1));
        chart.getChartData().getCategories().add(categoryCell);

        var valueCell = workbook.getCell(0, i + 1, 1, values[i]);
        series.getDataPoints().addDataPointForLineSeries(valueCell);
    }

    // Оставьте первый слайд линейным и измените только масштаб оси значений в копии.
    var logarithmicSlide = presentation.getSlides().addClone(slide);
    var logarithmicChart = logarithmicSlide.getShapes().get_Item(0);
    var valueAxis = logarithmicChart.getAxes().getVerticalAxis();
    valueAxis.setLogarithmic(true);
    valueAxis.setLogBase(10);

    presentation.save("LogarithmicAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Линейная шкала (слайд 1): Равные вертикальные расстояния представляют равные разницы в количестве запросов. Наибольшее значение доминирует, делая маленькие трудными для различения.

Логарифмическая шкала (слайд 2): Равные вертикальные расстояния представляют равные отношения. Каждый период имеет в десять раз больше запросов, чем предыдущий, поэтому точки образуют прямую восходящую линию на шкале с основанием 10. Метки оси по‑прежнему показывают исходные количества запросов.

Обработка нулевых и отрицательных значений

Логарифмическая шкала может отображать только строго положительные значения. Проверьте данные перед включением. Если нулевые или отрицательные значения имеют смысл, оставьте линейную шкалу или показывайте их отдельно. Если исключение этих значений оправдано, объясните причину. Не заменяйте их «молчаливо» маленькими положительными числами, так как это меняет смысл данных. Любой вручную заданный минимум или максимум для логарифмической оси также должен быть положительным.

FAQ

Как установить значение, в котором одна ось пересекает другую (пересечение осей)?

Используйте setCrossType для выбора поведения пересечения. Чтобы задать числовое значение пересечения, примените setCrossAt. Эти параметры позволяют переместить точку пересечения осей к нужной базовой линии.

Как позиционировать метки делений относительно оси?

Вызовите setTickLabelPosition с использованием TickLabelPositionType: Low, High, NextTo или None. Для управления самими делениями используйте setMajorTickMark или setMinorTickMark; они независимы от позиционирования меток.