JavaScript を使用した Treemap と Sunburst チャートのデータポイントのカスタマイズ

PowerPoint の他のチャートタイプの中で、階層型のチャートは TreemapSunburst の 2 種類があります(Sunburst Graph、Sunburst Diagram、Radial Chart、Radial Graph、Multi Level Pie Chart とも呼ばれます)。これらのチャートは、ツリー構造として階層データを表示します—葉(リーフ)から枝の先頭まで。葉はシリーズのデータポイントで定義され、以降のネストされたグループ化レベルは対応するカテゴリで定義されます。Aspose.Slides for Node.js via Java は、JavaScript で Sunburst チャートと Treemap のデータポイントの書式設定を可能にします。

以下は Sunburst チャートです。Series1 列のデータが葉ノードを定義し、他の列が階層データポイントを定義します: todo:image_alt_text

プレゼンテーションに新しい Sunburst チャートを追加することから始めましょう:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    // ...
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

チャートのデータポイントを書式設定する必要がある場合は、以下を使用します:

ChartDataPointLevelsManagerChartDataPointLevel クラスと ChartDataPoint.getDataPointLevels メソッドは、Treemap と Sunburst チャートのデータポイントの書式設定へのアクセスを提供します。
[ChartDataPointLevelsManager] は複数レベルのカテゴリにアクセスするために使用され、[ChartDataPointLevel] オブジェクトのコンテナを表します。
基本的に、データポイントに固有のプロパティが追加された ChartCategoryLevelsManager のラッパーです。
[ChartDataPointLevel] クラスは、getFormatgetDataLabel の 2 つのメソッドを持ち、対応する設定へのアクセスを提供します。

データポイントの値を表示

「Leaf 4」データポイントの値を表示します:

var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
dataPoints.get_Item(3).getDataPointLevels().get_Item(0).getLabel().getDataLabelFormat().setShowValue(true);

todo:image_alt_text

データポイントのラベルと色を設定

「Branch 1」データラベルをカテゴリ名の代わりにシリーズ名(「Series1」)を表示するように設定し、テキスト色を黄色に設定します:

var branch1Label = dataPoints.get_Item(0).getDataPointLevels().get_Item(0).getLabel();
branch1Label.getDataLabelFormat().setShowCategoryName(false);
branch1Label.getDataLabelFormat().setShowSeriesName(true);
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "YELLOW"));

todo:image_alt_text

データポイントの枝の色を設定

「Steam 4」枝の色を変更します:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
    var stem4branch = dataPoints.get_Item(9).getDataPointLevels().get_Item(1);
    stem4branch.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    stem4branch.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

todo:image_alt_text

よくある質問

Sunburst/Treemap のセグメントの順序(ソート)を変更できますか?

いいえ。PowerPoint はセグメントを自動的に並べ替えます(通常は値の降順、時計回り)。Aspose.Slides も同様の動作を行い、直接順序を変更することはできません。データを事前に処理することで実現します。

プレゼンテーションのテーマはセグメントおよびラベルの色にどのように影響しますか?

チャートの色は、明示的に塗りつぶしやフォントを設定しない限り、プレゼンテーションのテーマ/パレットを継承します。一定の結果を得るには、必要なレベルで実体の塗りつぶしとテキスト書式を固定してください。

PDF/PNG へのエクスポートはカスタム枝の色やラベル設定を保持しますか?

はい。プレゼンテーションをエクスポートする際、チャートの設定(塗りつぶし、ラベル)は出力形式に保持されます。これは、Aspose.Slides がチャートの書式設定を適用した状態でレンダリングするためです。

ラベルや要素の実際の座標を計算し、チャート上にカスタムオーバーレイを配置できますか?

はい。チャートのレイアウトが検証された後、要素(例として DataLabel)には実際の X および実際の Y が利用可能となり、オーバーレイの正確な位置決めに役立ちます。