# データ構造

データセットのdataプロパティには、様々な形式でデータを渡すことができます。デフォルトでは、そのdataは関連付けられたチャートの種類とスケールを使用して解析されます。

メインのdataプロパティのlabelsプロパティを使用する場合は、値が最も多いデータセットと同じ数の要素を含んでいる必要があります。これらのラベルは、インデックス軸（デフォルトではx軸）のラベルに使用されます。ラベルの値は配列で指定する必要があります。指定されたラベルは、正しくレンダリングするために文字列または数値の型にする必要があります。複数行のラベルが必要な場合は、各行を配列の1つのエントリとして指定できます。

# Primitive[]

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [20, 10],
    }],
    labels: ['a', 'b']
  }
}

dataが数値の配列の場合、同じインデックスにあるlabels配列の値がインデックス軸（垂直チャートではx、水平チャートではy）に使用されます。

# Object[]

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
    }]
  }
}

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: '2016-12-25', y: 20}, {x: '2016-12-26', y: 10}]
    }]
  }
}

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [{x: 'Sales', y: 20}, {x: 'Revenue', y: 10}]
    }]
  }
}

これは、解析されたデータに使用される内部形式でもあります。このモードでは、チャートオプションまたはデータセットでparsing: falseを指定することで、解析を無効にすることができます。解析が無効になっている場合、データはソートされており、関連付けられたチャートの種類とスケールが内部的に使用する形式である必要があります。

指定された値は、関連付けられたスケールで解析できるか、または関連付けられたスケールの内部形式である必要があります。よくある間違いは、内部形式として整数を使用するcategoryスケールに整数を指定することです。各整数はラベル配列のインデックスを表します。スキップされた値にはnullを使用できます。

# カスタムプロパティを使用したObject[]

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'id',
      yAxisKey: 'nested.value'
    }
  }
}

円グラフ/ドーナツグラフ、レーダーチャート、または極座標グラフを使用する場合、parsingオブジェクトには、参照する値を指すkey項目が必要です。この例では、ドーナツグラフには値1500と500の2つのアイテムが表示されます。

const cfg = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
  },
  options: {
    parsing: {
      key: 'nested.value'
    }
  }
}

キーにドットが含まれている場合、二重スラッシュでエスケープする必要があります。

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{'data.key': 'one', 'data.value': 20}, {'data.key': 'two', 'data.value': 30}]
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'data\\.key',
      yAxisKey: 'data\\.value'
    }
  }
}

警告

レーダーチャートでオブジェクト表記を使用する場合でも、チャートを正しく表示するにはラベル配列が必要です。

# Object

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: {
        January: 10,
        February: 20
      }
    }]
  }
}

このモードでは、プロパティ名がindexスケールに使用され、値がvalueスケールに使用されます。垂直チャートの場合、インデックススケールはx、値スケールはyです。

# データセットの設定

名前	型	説明
`label`	`文字列`	凡例とツールチップに表示されるデータセットのラベル。
`clip`	`数値`\|`オブジェクト`	chartAreaに対するクリッピング方法。正の値はオーバーフローを許可し、負の値はchartAreaの内側にそのピクセル分クリップします。0はchartAreaでクリップします。クリッピングは、各辺ごとに設定することもできます：clip: {left: 5, top: false, right: -2, bottom: 0}
`order`	`数値`	データセットの描画順序。スタッキング、ツールチップ、凡例についても順序に影響します。
`stack`	`文字列`	このデータセットが属するグループのID（スタックされている場合、各グループは別々のスタックになります）。デフォルトはデータセットの`type`です。
`parsing`	`ブール値`\|`オブジェクト`	データセットの解析方法。チャートオプションまたはデータセットでparsing: falseを指定することで、解析を無効にすることができます。解析が無効になっている場合、データはソートされており、関連付けられたチャートの種類とスケールが内部的に使用する形式である必要があります。
`hidden`	`ブール値`	データセットの表示/非表示を設定します。`hidden: true`を使用すると、データセットのレンダリングがチャートから非表示になります。

# parsing

const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb'],
    datasets: [{
      label: 'Net sales',
      data: data,
      parsing: {
        yAxisKey: 'net'
      }
    }, {
      label: 'Cost of goods sold',
      data: data,
      parsing: {
        yAxisKey: 'cogs'
      }
    }, {
      label: 'Gross margin',
      data: data,
      parsing: {
        yAxisKey: 'gm'
      }
    }]
  },
};

# Typescript

Typescriptを使用する場合、デフォルトのデータ構造ではないデータ構造を使用する場合は、データ変数をインスタンス化するときに型インターフェースに渡す必要があります。

import {ChartData} from 'chart.js';
const datasets: ChartData <'bar', {key: string, value: number} []> = {
  datasets: [{
    data: [{key: 'Sales', value: 20}, {key: 'Revenue', value: 10}],
    parsing: {
      xAxisKey: 'key',
      yAxisKey: 'value'
    }
  }],
};

← 色フォント →