Excel JavaScript API を使用してグラフを操作するWork with Charts using the Excel JavaScript API

この記事では、Excel JavaScript API を使用して、グラフの一般的なタスクを実行する方法のサンプル コードを提供します。 Chart オブジェクトと ChartCollection オブジェクトをサポートするプロパティとメソッドの完全なリストについては、「Chart Object オブジェクト (JavaScript API for Excel)」および「Chart Collection オブジェクト (JavaScript API for Excel)」を参照してください。This article provides code samples that show how to perform common tasks with charts using the Excel JavaScript API. For the complete list of properties and methods that the Chart and ChartCollection objects support, see Chart Object (JavaScript API for Excel) and Chart Collection Object (JavaScript API for Excel).

グラフの作成Create a chart

次のコード サンプルでは、Sample というワークシートにグラフを作成します。 グラフは、範囲 A1:B13 のデータに基づいた折れ線グラフです。The following code sample creates a chart in the worksheet named Sample. The chart is a Line chart that is based upon data in the range A1:B13.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");
    var dataRange = sheet.getRange("A1:B13");
    var chart = sheet.charts.add("Line", dataRange, "auto");

    chart.title.text = "Sales Data";
    chart.legend.position = "right"
    chart.legend.format.fill.setSolidColor("white");
    chart.dataLabels.format.font.size = 15;
    chart.dataLabels.format.font.color = "black";

    return context.sync();
}).catch(errorHandlerFunction);

新しい折れ線グラフNew line chart

Excel での新しい折れ線グラフ

データ系列をグラフに追加するAdd a data series to a chart

次のコード サンプルは、ワークシートの最初のグラフにデータ系列を追加します。 新しいデータ系列は 2016 という名前の列に対応し、範囲 D2:D5 のデータに基づいています。The following code sample adds a data series to the first chart in the worksheet. The new data series corresponds to the column named 2016 and is based upon data in the range D2:D5.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");
    var chart = sheet.charts.getItemAt(0);
    var dataRange = sheet.getRange("D2:D5");

    var newSeries = chart.series.add("2016");
    newSeries.setValues(dataRange);

    return context.sync();
}).catch(errorHandlerFunction);

2016 データ系列が追加される前のグラフChart before the 2016 data series is added

2016 データ系列が追加される前の Excel のグラフ

2016 データ系列が追加された後のグラフChart after the 2016 data series is added

2016 データ系列が追加された後の Excel のグラフ

グラフ タイトルを設定するSet chart title

次のコード サンプルは、ワークシートの最初のグラフのタイトルを Sales Data by Year に設定します。The following code sample sets the title of the first chart in the worksheet to Sales Data by Year.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");

    var chart = sheet.charts.getItemAt(0);
    chart.title.text = "Sales Data by Year";

    return context.sync();
}).catch(errorHandlerFunction);

タイトル設定後のグラフChart after title is set

タイトルが付いた Excel のグラフ

グラフの軸のプロパティを設定するSet properties of an axis in a chart

縦棒グラフ、横棒グラフ、散布図などのデカルト座標系を使用するグラフには、項目軸と数値軸が含まれています。 次の例で、タイトルを設定し、グラフの軸の単位を表示する方法を示します。Charts that use the Cartesian coordinate system such as column charts, bar charts, and scatter charts contain a category axis and a value axis. These examples show how to set the title and display unit of an axis in a chart.

軸のタイトルを設定するSet axis title

次のコード サンプルは、ワークシートの最初のグラフの、項目軸のタイトルを Product に設定します。The following code sample sets the title of the category axis for the first chart in the worksheet to Product.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");

    var chart = sheet.charts.getItemAt(0);
    chart.axes.categoryAxis.title.text = "Product";

    return context.sync();
}).catch(errorHandlerFunction);

項目軸のタイトルが設定された後のグラフChart after title of category axis is set

軸のタイトルが付いた Excel のグラフ

軸の表示単位を設定するSet axis display unit

次のコード サンプルは、ワークシートの最初のグラフの、数値軸の表示単位を Hundreds に設定します。The following code sample sets the display unit of the value axis for the first chart in the worksheet to Hundreds.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");

    var chart = sheet.charts.getItemAt(0);
    chart.axes.valueAxis.displayUnit = "Hundreds";

    return context.sync();
}).catch(errorHandlerFunction);

数値軸の表示単位が設定された後のグラフChart after display unit of value axis is set

軸の表示単位が付いた Excel のグラフ

グラフの枠線の表示/非表示を設定するSet visibility of gridlines in a chart

次のコード サンプルは、ワークシートの最初のグラフの、数値軸の主な枠線を非表示にします。 chart.axes.valueAxis.majorGridlines.visibletrue に設定すると、グラフの数値軸の主な枠線を表示できます。The following code sample hides the major gridlines for the value axis of the first chart in the worksheet. You can show the major gridlines for the value axis of the chart, by setting chart.axes.valueAxis.majorGridlines.visible to true.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");

    var chart = sheet.charts.getItemAt(0);
    chart.axes.valueAxis.majorGridlines.visible = false;

    return context.sync();
}).catch(errorHandlerFunction);

枠線が非表示にされたグラフChart with gridlines hidden

枠線が非表示にされた Excel のグラフ

グラフの近似曲線Chart trendlines

近似曲線を追加するAdd a trendline

次のコード サンプルは、Sample という名前のワークシートの、最初のグラフの最初の系列に移動平均の近似曲線を追加します。近似曲線は 5 期間にわたる移動平均を示します。The following code sample adds a moving average trendline to the first series in the first chart in the worksheet named Sample. The trendline shows a moving average over 5 periods.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");

    var chart = sheet.charts.getItemAt(0);
    var seriesCollection = chart.series;
    seriesCollection.getItemAt(0).trendlines.add("MovingAverage").movingAveragePeriod = 5;

    return context.sync();
}).catch(errorHandlerFunction);

移動平均の近似曲線が記入されたグラフChart with moving average trendline

移動平均の近似曲線が記入された Excel のグラフ

近似曲線を更新するUpdate a trendline

次のコード サンプルは、Sample という名前のワークシートの、最初のグラフの最初の系列に対して、近似曲線の種類を線形に設定しています。The following code sample sets the trendline to type Linear for the first series in the first chart in the worksheet named Sample.

Excel.run(function (context) {
    var sheet = context.workbook.worksheets.getItem("Sample");

    var chart = sheet.charts.getItemAt(0);
    var seriesCollection = chart.series;
    var series = seriesCollection.getItemAt(0);
    series.trendlines.getItem(0).type = "Linear";

    return context.sync();
}).catch(errorHandlerFunction);

線形の近似曲線が記入されたグラフChart with linear trendline

線形の近似曲線が記入された Excel のグラフ

グラフを画像としてエクスポートするExport a chart as an image

グラフを Excel の外部で画像としてレンダリングできます。Charts can be rendered as images outside of Excel. Chart.getImage からは、グラフを JPEG 画像として表す base 64 エンコード文字列が返されます。Chart.getImage returns the chart as a base64-encoded string representing the chart as a JPEG image. 次のコードでは、画像の文字列を取得してコンソールに表示する方法を示します。The following code shows how to get the image string and log it to the console.

Excel.run(function (ctx) {
    var chart = ctx.workbook.worksheets.getItem("Sheet1").charts.getItem("Chart1");
    var imageAsString = chart.getImage();
    return context.sync().then(function () {
        console.log(imageAsString.value);
        // Instead of logging, your add-in may use the base64-encoded string to save the image as a file or insert it in HTML.
    });
}).catch(errorHandlerFunction);

Chart.getImage は、省略可能なパラメーターとして幅、高さ、自動調整モードの 3 つを受け取ります。Chart.getImage takes three optional parameters: width, height, and the fitting mode.

getImage(width?: number, height?: number, fittingMode?: Excel.ImageFittingMode): OfficeExtension.ClientResult<string>;

これらのパラメーターにより、画像のサイズが決まります。These parameters determine the size of the image. 画像は常に同じ縦横比でスケーリングされます。Images are always proportionally scaled. 幅と高さのパラメーターにより、スケーリングされた画像の上端または下端が設定されます。The width and height parameters put upper or lower bounds on the scaled image. ImageFittingMode には 3 つの値があり、次のように動作します。ImageFittingMode has three values with the following behaviors:

  • Fill: 画像の最小の高さまたは幅が、指定された高さまたは幅になります (画像をスケーリングしたときに最初に達した方)。Fill: The image’s minimum height or width is the specified height or width (whichever is reached first when scaling the image). これは、自動調整モードが指定されていない場合の既定の動作です。This is the default behavior when no fitting mode is specified.
  • Fit: 画像の最大の高さまたは幅が、指定された高さまたは幅になります (画像をスケーリングしたときに最初に達した方)。Fit: The image’s maximum height or width is the specified height or width (whichever is reached first when scaling the image).
  • FitAndCenter: 画像の最大の高さまたは幅が、指定された高さまたは幅になります (画像をスケーリングしたときに最初に達した方)。FitAndCenter: The image’s maximum height or width is the specified height or width (whichever is reached first when scaling the image). 結果の画像は、他の寸法について中央に配置されます。The resulting image is centered relative to the other dimension.

関連項目See also