Настройка осей диаграмм в презентациях с помощью 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`	Category 1, Category 2, Category 3, … Category 24
`2`	Category 1, Category 3, Category 5, … Category 23
`3`	Category 1, Category 4, Category 7, … Category 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): В этом отображении каждая вторая подпись категории выводится и переносится на две строки. Автоматический результат может варьироваться в зависимости от размера диаграммы, шрифтов и рендерера.

Automatic category label spacing with all 24 columns visible

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

Manual category label interval of three with all 24 columns visible

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

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

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

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

Пример заменяет данные диаграммы по умолчанию четырьмя годовыми значениями. Даты хранятся как серийные номера 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();
}

Вопросы и ответы

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

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

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

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

Просмотрщик презентаций