JavaScript を使用したプレゼンテーションでのチャート軸のカスタマイズ

このページの概要

Java を介して Node.js 用 Aspose.Slides と JavaScript を使用し、レポートや可視化のための PowerPoint プレゼンテーションでチャート軸をカスタマイズする方法をご紹介します。

概要

この記事では、Java を使用した Node.js 用 Aspose.Slides でチャート軸をカスタマイズする方法を説明します。計算された軸値、チャートの行列の入れ替え、軸の表示・非表示、カテゴリラベルと目盛り間隔、日付カテゴリと書式設定、タイトルの回転、軸の位置決め、表示単位について解説します。

チャートの垂直軸で最大値を取得する

デフォルトデータでエリアチャートを追加した Presentation を作成します。計算された軸値を読み取る前に 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（ヘッダー行とカテゴリ列を含む）にバインドし、行と列を入れ替えた後、4 系列・3 カテゴリのチャートを保存します。

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();
}

折れ線グラフの垂直軸を無効化する

垂直軸に対して false を渡して setVisible を呼び出すと、軸を非表示にできます。例ではデフォルトデータで折れ線グラフを作成し、垂直軸を非表示にした状態で保存します。

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();
}

折れ線グラフの水平軸を無効化する

水平軸に対して false を渡して setVisible を呼び出すと、軸を非表示にできます。例ではデフォルトデータで折れ線グラフを作成し、水平軸を非表示にした状態で保存します。

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 が必要で、1 枚目のスライドの最初のシェイプとしてチャートが配置され、カテゴリセルには数値の Excel 日付が格納されています。水平軸を日付軸に変更します。setAutomaticMajorUnit に false、setMajorUnit に 1、setMajorUnitScale に TimeUnitType.Months を指定すると、1 ヶ月間隔で主要目盛りが配置されます。

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 の間隔では、3 番目ごとのラベルが表示され、表示ラベルの間に 2 つのラベルが非表示になります。対応する列は削除されません。自動間隔は利用可能なスペースに基づいて決定され、必ずしもすべてのラベルが表示されるわけではありません。

目盛りは別個に制御できます。setAutomaticTickMarksSpacing に false を渡し、setTickMarksSpacing で間隔を設定します。たとえば 1 を指定すると、各カテゴリ間隔に目盛りが置かれ、ラベルは 3 番目のカテゴリごとにのみ表示されます。setMajorTickMark で目立つスタイルを設定すると結果が確認できます。自動間隔設定に true を再度指定すると、チャートが自動で間隔を決定します。

以下の自己完結型サンプルは 24 個のカテゴリと 1 系列を作成し、CategoryAxisIntervals.pptx に 3 スライドを保存します：自動間隔、ラベル間隔を手動で設定した独立した目盛り、そして自動間隔に戻したものです。2 つのコピーは元のチャートデータを保持します。入力プレゼンテーションは不要です。水平ラベルテキストにより密度の違いが見やすくなります。

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: 3番目ごとのラベルを表示し、すべてのカテゴリに目盛りを残す。
    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();
}

Automatic spacing (slide 1): このレンダリングでは、2 番目のカテゴリラベルが表示され、2 行に折り返されます。自動結果はチャートサイズ、フォント、レンダラにより変わります。

Manual spacing (slide 2): 3 番目ごとのラベルが 1 行に表示され、目盛りはすべてのカテゴリ間隔に残ります。ラベルがない 24 列すべてが同じ値で表示されます。スライド 3 は上記の自動表示に戻ります。

正しい軸と間隔を選択する

テキストカテゴリ軸（列、折れ線、エリア、棒グラフのカテゴリ軸など）にこのカテゴリ数間隔を使用します。列グラフでは水平軸、水平棒グラフではカテゴリ軸が垂直になるため、getVerticalAxis が返す軸に設定を適用します。目盛り間隔は、系列軸があるチャートの系列軸にも適用できます。

カテゴリラベル間隔は、値軸の数値スケールを設定するために使用しないでください。値軸では、setMajorUnit が値の差を指定します。たとえば主要単位を 10 にすると、軸がゼロから始まる場合は 0、10、20… と目盛りが生成されます。カテゴリラベル間隔 3 はデータ値に関係なくカテゴリ位置をカウントします。散布図やバブルチャートはテキストカテゴリ軸ではなく値軸を使用します。日付軸の場合は、Change a Category Axis に記載の時間ベースの主要単位とスケールを使用してください。

カテゴリ軸値の日付形式を設定する

この例ではデフォルトのチャートデータを 4 つの年度データに置き換えます。日付は最初のワークシート（インデックス 0）に OLE Automation のシリアル番号として保存され、1899 年 12 月 30 日からの日数で計算されます。JavaScript の計算では UTC タイムスタンプを使用し、差を 86,400,000 ミリ秒（1 日）で除算します。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();
}

チャート軸タイトルの回転角度を設定する

垂直軸に対して true を渡して setTitle を呼び出し、タイトルテキストを設定し、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();
}

FAQ

軸が交差する位置（軸交差）を数値で設定するにはどうすればよいですか？

setCrossType を使用して交差動作を選択します。数値の交差位置を指定するには、setCrossAt を使用します。これらの設定により、軸交差点を適切なベースラインに移動できます。

目盛りラベルを軸に対してどのように配置できますか？

TickLabelPositionType の Low、High、NextTo、None を使用して setTickLabelPosition を呼び出します。目盛り自体を制御するには、setMajorTickMark または setMinorTickMark を使用します。これらはラベル配置とは別の設定です。