#データ構造

のdataデータセットのプロパティはさまざまな形式で渡すことができます。デフォルトでは、data関連するグラフの種類とスケールを使用して解析されます。

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

#原生的[]

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

ときdataは数値の配列です。値は次のとおりです。labels同じインデックスの配列がインデックス軸に使用されます (x垂直の場合、y水平チャートの場合)。

#物体[]

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'
    }
  }
}

警告

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

#物体

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

このモードでは、プロパティ名は次の目的で使用されます。indexスケールと価値value規模。垂直グラフの場合、インデックススケールは次のとおりです。xそして価値スケールはy。

#データセットの構成

名前	タイプ	説明
`label`	`string`	凡例とツールヒントに表示されるデータセットのラベル。
`clip`	`number`\|`object`	chartArea を基準にしてクリップする方法。正の値はオーバーフローを許可し、負の値は chartArea 内の多くのピクセルをクリップします。 0 = chartArea でクリップします。クリッピングはサイドごとに構成することもできます。clip: {left: 5、top: false、right: -2、bottom: 0}
`order`	`number`	データセットの描画順序。スタック、ツールヒント、凡例の順序にも影響します。
`stack`	`string`	このデータセットが属するグループの ID (スタックすると、各グループは個別のスタックになります)。デフォルトはデータセット`type`。
`parsing`	`boolean`\|`object`	データセットを解析する方法。解析は、チャートオプションまたはデータセットで parsing: false を指定することで無効にできます。解析が無効になっている場合は、関連するグラフの種類とスケールが内部で使用する形式でデータを並べ替える必要があります。
`hidden`	`boolean`	データセットの可視性を構成します。使用する`hidden: true`データセットがチャートに表示されないようにします。

#解析する

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 を使用する場合、デフォルトのデータ構造ではないデータ構造を使用したい場合は、データ変数をインスタンス化するときにそれを type インターフェイスに渡す必要があります。

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'
    }
  }],
};

←色フォント→