Excel JavaScript API を使用してグラフのデータ ラベルを操作する

Excel グラフにデータ ラベルを追加すると、グラフの重要な側面に関する視覚化エクスペリエンスが向上します。 データ ラベルの詳細については、「 グラフ内のデータ ラベルを追加または削除する」を参照してください。

次のコード サンプルでは、この記事で使用されるサンプル データと 自転車パーツの生産 グラフを設定します。

async function setup() {
  await Excel.run(async (context) => {
    context.workbook.worksheets.getItemOrNullObject("Sample").delete();
    const sheet = context.workbook.worksheets.add("Sample");

    let salesTable = sheet.tables.add("A1:E1", true);
    salesTable.name = "SalesTable";

    salesTable.getHeaderRowRange().values = [["Product", "Qtr1", "Qtr2", "Qtr3", "Qtr4"]];

    salesTable.rows.add(null, [
      ["Frames", 5000, 7000, 6544, 5377],
      ["Saddles", 400, 323, 276, 1451],
      ["Brake levers", 9000, 8766, 8456, 9812],
      ["Chains", 1550, 1088, 692, 2553],
      ["Mirrors", 225, 600, 923, 344],
      ["Spokes", 6005, 7634, 4589, 8765]
    ]);

    sheet.activate();
    createChart(context);
  });
}

async function createChart(context: Excel.RequestContext) {
  const worksheet = context.workbook.worksheets.getActiveWorksheet();
  const chart = worksheet.charts.add(
    Excel.ChartType.lineMarkers,
    worksheet.getRange("A1:E7"),
    Excel.ChartSeriesBy.rows
  );
  chart.axes.categoryAxis.setCategoryNames(worksheet.getRange("B1:E1"));
  chart.name = "PartChart";

  // Place the chart below sample data.
  chart.top = 125;
  chart.left = 5;
  chart.height = 300;
  chart.width = 450;

  chart.title.text = "Bicycle Part Production";
  chart.legend.position = "Bottom";

  await context.sync();
}

この画像は、サンプル コードを実行した後のグラフの表示方法を示しています。

データ ラベルを追加する

グラフにデータ ラベルを追加するには、変更する一連のデータ ポイントを取得し、 hasDataLabels プロパティを true に設定します。

async function addDataLabels() {
  await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem("PartChart");
    await context.sync();

    // Get spokes data series.
    const series = chart.series.getItemAt(5);

    // Turn on data labels and set location.
    series.hasDataLabels = true;
    series.dataLabels.position = Excel.ChartDataLabelPosition.top;
    await context.sync();
  });
}

データ ラベルのサイズ、図形、テキストの書式設定

データ ラベルの属性は、次の API を使用して変更できます。

• geometrShapeType プロパティを設定して、データ ラベルの図形を変更します。
• setWidth メソッドと setHeight メソッドを使用して高さと幅を変更します。
• text プロパティを使用して テキスト を変更します。
• format プロパティを使用してテキストの 書式設定 を変更します。 罫線、塗りつぶし、フォントのプロパティを変更できます。

次のコード サンプルは、データ ラベルの図形の種類、高さと幅、フォントの書式設定を設定する方法を示しています。

 await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem("PartChart");
    const series = chart.series.getItemAt(5);

    // Set geometric shape of data labels to cubes.
    series.dataLabels.geometricShapeType = Excel.GeometricShapeType.cube;
    series.points.load("count");
    await context.sync();
    let pointsLoaded = series.points.count;

    // Change height, width, and font size of all data labels.
    for (let j = 0; j < pointsLoaded; j++) {
      series.points.getItemAt(j).dataLabel.setWidth(60);
      series.points.getItemAt(j).dataLabel.setHeight(30);
      series.points.getItemAt(j).dataLabel.format.font.size = 12;
    }

    // Set text of a data label.
    series.points.getItemAt(2).dataLabel.setWidth(80);
    series.points.getItemAt(2).dataLabel.setHeight(50);
    series.points.getItemAt(2).dataLabel.text = "Spokes Qtr3: 4589 ↓";

    await context.sync();
});

次のスクリーンショットでは、グラフにスポーク データのカウント データ ラベルが含まれるようになり、3 番目のデータ ポイントにはカスタム テキストが含まれます。

データ ラベル内のテキストの書式設定を変更することもできます。 次のコード サンプルは 、getSubstring メソッドを使用してデータ ラベル テキストの一部を取得し、フォントの書式設定を適用する方法を示しています。

await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem("PartChart");
    const series = chart.series.getItemAt(5);

    // Get the "Spokes" data label.
    let label = series.points.getItemAt(2).dataLabel;
    label.load();
    await context.sync();

    // Change border weight of this label.
    label.format.border.weight = 2;
    // Format "Qtr3" as bold and italicized. 
    label.getSubstring(7, 4).font.bold = true;
    label.getSubstring(7, 4).font.italic = true;
    // Format "Spokes" as green.
    label.getSubstring(0, 6).font.color = "green";
    // Format "4589" as red.
    label.getSubstring(12).font.color = "red";
    // Move label up by 15 points.
    label.top = label.top - 15;

    await context.sync();
 });

引出し線の書式設定

引き出し線は、データ ラベルをそれぞれのデータ ポイントに接続し、グラフで参照する内容を簡単に確認できるようにします。 showLeaderLines プロパティを使用して、引き出し線をオンにします。 引出し線の形式は、 leaderLines.format プロパティを使用して設定できます。

await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem("PartChart");
    const series = chart.series.getItemAt(5);
    
    // Show leader lines.
    series.showLeaderLines = true;
    await context.sync();
    
    // Format leader lines as dotted orange lines with weight 2.
    series.dataLabels.leaderLines.format.line.lineStyle = Excel.ChartLineStyle.dot;
    series.dataLabels.leaderLines.format.line.color = "orange";
    series.dataLabels.leaderLines.format.line.weight = 2;
});

吹き出しを作成する

吹き出しは、バブル型ポインターを使用してデータ ポイントに接続するデータ ラベルです。 吹き出しにはアンカーがあり、データ ポイントからグラフ上の他の場所に移動できます。

次のコード サンプルは、 Excel.GeometrShapeType.wedgeRectCallout を使用するように系列内のデータ ラベルを変更する方法を示しています。 同じデータ ラベルに 2 つのインジケーターが表示されないように、引出し線がオフになっていることに注意してください。

 await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem("PartChart");
    const series = chart.series.getItemAt(5);

    // Change to a wedge rectangle style callout.
    series.dataLabels.geometricShapeType = Excel.GeometricShapeType.wedgeRectCallout;
    series.showLeaderLines = false;
    await context.sync();
});

次のコード サンプルは、データ ラベルのアンカー位置を変更する方法を示しています。

await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem("PartChart");
    const series = chart.series.getItemAt(5);

    let label = series.points.getItemAt(2).dataLabel;
    let point = series.points.getItemAt(2);
    label.load();
    await context.sync();

    let anchor = label.getTailAnchor();
    anchor.load();
    await context.sync();

    anchor.top = anchor.top - 10;
    anchor.left = 40;
});

このスクリーンショットは、前のコード サンプルによって 3 番目のデータ ラベルのアンカーがどのように調整されるかを示しています。

関連項目

• Office アドインの Excel JavaScript オブジェクト モデル
• Excel JavaScript API を使用してグラフを操作する