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

この記事では、Excel JavaScript API を使用して、グラフの一般的なタスクを実行する方法のサンプル コードを提供します。This article provides code samples that show how to perform common tasks with charts using the Excel JavaScript API. Chart オブジェクトと ChartCollection オブジェクトをサポートするプロパティとメソッドの完全なリストについては、「Chart Object オブジェクト (JavaScript API for Excel)」および「Chart Collection オブジェクト (JavaScript API for Excel)」を参照してください。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 というワークシートにグラフを作成します。The following code sample creates a chart in the worksheet named Sample. グラフは、範囲 A1:B13 のデータに基づいた折れ線グラフです。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

次のコード サンプルは、ワークシートの最初のグラフにデータ系列を追加します。The following code sample adds a data series to the first chart in the worksheet. 新しいデータ系列は 2016 という名前の列に対応し、範囲 D2:D5 のデータに基づいています。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

次のコード サンプルは、ワークシートの最初のグラフの、数値軸の主な枠線を非表示にします。The following code sample hides the major gridlines for the value axis of the first chart in the worksheet. chart.axes.valueAxis.majorGridlines.visibletrue に設定すると、グラフの数値軸の主な枠線を表示できます。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 のグラフ

関連項目See also