データセット

datasetはデータを管理するためのコンポーネントです。ECharts 4以降、各シリーズのseries.dataにデータを設定することもできますが、データの再利用や「データと設定」の分離を容易にするために、datasetを使用してデータを管理することをお勧めします。結局のところ、データは実行時に変更される最も一般的な部分であり、他の設定はほとんど実行時に変更されません。

seriesの下にデータを定義する

例えば、seriesの下にデータが定義されている場合

option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};

ライブ

seriesの下にdataを定義することは、「ツリー」、「グラフ」、および大量のデータなど、特殊なデータ構造のカスタマイズに適しています。しかし、複数のシリーズでのデータ共有や、元のデータに基づいたチャートの種類とシリーズのマッピング配置には適していません。もう一つの欠点は、プログラマーは常にデータを個々のシリーズ（とカテゴリ）に最初に分割する必要があることです。

datasetにデータを定義する

dataをdatasetに定義する場合の利点は次のとおりです。

データ視覚化の考え方：（I）データを提供する、（II）データから視覚へのマッピングを行い、チャートを作成する。
データと他の設定を分割する。データは頻繁に変更されますが、他の設定はそうではありません。個別に管理しやすいです。
データは複数のシリーズまたはコンポーネントで再利用できます。各シリーズに対して大量のデータのコピーを作成する必要はありません。
2次元配列、クラスの配列など、より一般的なデータ形式をサポートしており、ユーザーがデータ形式を変換する必要性をある程度軽減します。

簡単なdatasetの例を以下に示します。

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // Provide a set of data.
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // Declare an x-axis (category axis).
  // The category map the first column in the dataset by default.
  xAxis: { type: 'category' },
  // Declare a y-axis (value axis).
  yAxis: {},
  // Declare several 'bar' series,
  // every series will auto-map to each column by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};option = {
  legend: {},
  tooltip: {},
  dataset: {
    // Provide a set of data.
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // Declare an x-axis (category axis).
  // The category map the first column in the dataset by default.
  xAxis: { type: 'category' },
  // Declare a y-axis (value axis).
  yAxis: {},
  // Declare several 'bar' series,
  // every series will auto-map to each column by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

ライブ

または、「クラスの配列」形式を使用してみてください。

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // Define the dimension of array. In cartesian coordinate system,
    // if the type of x-axis is category, map the first dimension to
    // x-axis by default, the second dimension to y-axis.
    // You can also specify 'series.encode' to complete the map
    // without specify dimensions. Please see below.

    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};option = {
  legend: {},
  tooltip: {},
  dataset: {
    // Define the dimension of array. In cartesian coordinate system,
    // if the type of x-axis is category, map the first dimension to
    // x-axis by default, the second dimension to y-axis.
    // You can also specify 'series.encode' to complete the map
    // without specify dimensions. Please see below.

    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

ライブ

データからチャートへのマッピング

データ視覚化の考え方：（I）データを提供する、（II）データから視覚へのマッピングを行い、チャートを作成する。

簡単に言うと、これらのマッピングの設定を行うことができます。

seriesにマッピングするdatasetの「列」または「行」を指定します。series.seriesLayoutByを使用して設定できます。デフォルトは列に従ってマッピングすることです。
次元マッピングのルール：「dataset」の次元からaxis、tooltip、label、visualMapへのマッピング方法。マッピングを設定するには、series.encodeとvisualMapを使用してください。前の例ではマッピング設定が指定されていなかったため、EChartsはデフォルトに従います。x軸がカテゴリの場合、dataset.sourceの最初の行にマッピングします。3列のチャートは、dataset.sourceの各行を順番にマッピングします。

設定の詳細を以下に示します。

datasetの行または列をseriesにマッピングする

datasetがあれば、データが軸とシリーズにどのようにマッピングされるかを柔軟に設定できます。

seriesLayoutByを使用して、チャートの行と列の解釈を変更できます。seriesLayoutByには、

'column'：デフォルト値。シリーズはdatasetの列の上に配置されます。
'row'：シリーズはdatasetの行の上に配置されます。

この例を確認してください。

option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // These series will show in the first coordinate, each series map a row in dataset.
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // These series will show in the second coordinate, each series map a column in dataset.
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // These series will show in the first coordinate, each series map a row in dataset.
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // These series will show in the second coordinate, each series map a column in dataset.
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};

ライブ

設定の効果はこの例を参照してください。

次元

一般的に使用されるチャートで記述されているデータのほとんどは「2次元テーブル」構造です。前の例では、2次元配列を使用して2次元テーブルを含めました。シリーズを列にマッピングする場合、その列は「次元」と呼ばれ、各行は「アイテム」と呼ばれます。その逆も同様です。

次元には、チャートに表示するための名前を付けることができます。次元名は最初の列（行）で定義できます。前の例では、'score'、'amount'、'product'が次元の名前です。実際のデータは2行目から始まります。EChartsは、最初の列（行）にdataset.source内の次元名が含まれているかどうかを自動的に確認します。dataset.sourceHeader: trueを使用して、最初の列（行）が次元名を表すことを宣言することもできます。

単一のdataset.dimensionsまたはいくつかのseries.dimensionsを使用して次元を定義してみてください。これにより、名前と型を一緒に指定できます。

var option1 = {
  dataset: {
    dimensions: [
      { name: 'score' },
      // can be abbreviated as 'string', to indicate dimension name 。
      'amount',
      // Specify dimensions in 'type'.
      { name: 'product', type: 'ordinal' }
    ],
    source: []
  }
  // ...
};

var option2 = {
  dataset: {
    source: []
  },
  series: {
    type: 'line',
    // series.dimensions will cover the config in dataset.dimension
    dimensions: [
      null, // use null if you do not want dimension name.
      'amount',
      { name: 'product', type: 'ordinal' }
    ]
  }
  // ...
};

ほとんどの場合、次元型を定義する必要はありません。EChartsは自動的に判断します。判断が不正確な場合は、手動で定義できます。

次元型には、次の値を使用できます。

'number'：デフォルト、通常のデータ。
'ordinal'：カテゴリ、テキストなどの文字列型データ。軸上では次元型が'ordinal'の場合のみ使用できます。EChartsは自動的にこの型を判断しようとしますが、不正確な場合があるため、手動で指定できます。
'time'：時間データを表すために使用します。次元型が'time'として定義されている場合、EChartsはタイムスタンプとしてデータを自動的に解析します。たとえば、この次元のデータが'2017-05-10'の場合、EChartsは自動的に解析します。次元が時間軸として使用される場合（axis.type = 'time'）、次元型も'time'になります。dataで、より多くの時間型サポートを参照してください。
'float'：'float'次元でTypedArrayを使用してパフォーマンスを最適化します。
'int'：'int'次元でTypedArrayを使用してパフォーマンスを最適化します。

データからチャートへのマッピング (series.encode)

次元の概念を理解したら、series.encodeを使用してマッピングを行うことができます。

var option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        // Map "amount" column to x-axis.
        x: 'amount',
        // Map "product" row to y-axis.
        y: 'product'
      }
    }
  ]
};var option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        // Map "amount" column to x-axis.
        x: 'amount',
        // Map "product" row to y-axis.
        y: 'product'
      }
    }
  ]
};

ライブ

series.encode宣言の基本構造

コロンの左側：軸またはラベルの具体的な名前。
コロンの右側：次元名（文字列）または番号（整数、0からカウント）、1つまたは複数の次元を指定します（配列を使用）。

一般的に、以下の情報は定義する必要はありません。必要に応じて記入してください。

series.encodeで推奨される属性

// Supported in every coordinate and series:
encode: {
  // Display the value of dimension named "product" and "score" in tooltip.
  tooltip: ['product', 'score']
  // Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)
  seriesName: [1, 3],
  // Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id
	// when using setOption to update data, so that it can show animation properly.
  itemId: 2,
  // The itemName will show in the legend of Pie Charts.
  itemName: 3
}

// Grid/cartesian coordinate unique configs:
encode: {
  // Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis:
  x: [1, 5, 'score'],
  // Map "Dimension 0" to y-axis:
  y: 0
}

// singleAxis unique configs:
encode: {
  single: 3
}

// Polar coordinate unique configs:
encode: {
  radius: 3,
  angle: 2
}

// Geo-coordinate unique configs:
encode: {
  lng: 3,
  lat: 2
}

// For some charts without coordinate like pie chart, funnel chart:
encode: {
  value: 3
}

これは、series.encodeのより詳細な例です。

デフォルトのseries.encode

series.encodeを指定しない場合、EChartsは一般的なチャート（折れ線グラフ、棒グラフ、散布図、ローソク足チャートなど）に対していくつかのデフォルトのマッピングルールを使用します。デフォルトルールは次のとおりです。

座標系内（例：直交座標系、極座標系）
- カテゴリ軸がある場合（axis.type = 'category'）、最初の列（行）を軸に、その後の各列（行）を各シリーズにマッピングします。
- 両方の軸がカテゴリでない場合、2つの列を1つのシリーズに、2つの軸にマッピングします。
軸がない場合（例：円グラフ）
- 最初の列（行）を名前として、2番目の列（行）を値として使用します。列（行）が1つしかない場合は、EChartsは名前を設定しません。

デフォルトルールでは要件を満たせない場合は、自分でencodeを設定できます。これは複雑ではありません。例を参照してください。

series.encodeの一部の一般的な設定

Q：3列目をx軸、5列目をy軸として設定するにはどうすればよいですか？

option = {
  series: {
    // dimensionIndex count from 0, so the 3rd line is dimensions[2].
    encode: { x: 2, y: 4 }
    // ...
  }
};

Q：3行目をx軸、5行目をy軸として設定するにはどうすればよいですか？

option = {
  series: {
    encode: { x: 2, y: 4 },
    seriesLayoutBy: 'row'
    // ...
  }
};

Q：2列目をラベルとして設定するにはどうすればよいですか？

A：現在、label.formatterで特定の次元から値を追跡できます。

series: {
  label: {
    // `'{@score}'` means the value in the dimension named "score".
    // `'{@[4]}'` means the value in dimension 4.
    formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';
  }
}

Q：ツールチップに2列目と3列目とを表示するにはどうすればよいですか？

option = {
  series: {
    encode: {
      tooltip: [1, 2]
      // ...
    }
    // ...
  }
};

Q：datasetに含まれていない場合、次元名を定義するにはどうすればよいですか？

var option = {
  dataset: {
    dimensions: ['score', 'amount'],
    source: [
      [89.3, 3371],
      [92.1, 8123],
      [94.4, 1954],
      [85.4, 829]
    ]
  }
};

Q：3列目を散布図のサイズにマッピングするにはどうすればよいですか？

var option = {
  dataset: {
    source: [
      [12, 323, 11.2],
      [23, 167, 8.3],
      [81, 284, 12],
      [91, 413, 4.1],
      [13, 287, 13.5]
    ]
  },
  visualMap: {
    show: false,
    dimension: 2, // means the 3rd column
    min: 2, // lower bound
    max: 15, // higher bound
    inRange: {
      // Size of the bubble.
      symbolSize: [5, 60]
    }
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter'
  }
};var option = {
  dataset: {
    source: [
      [12, 323, 11.2],
      [23, 167, 8.3],
      [81, 284, 12],
      [91, 413, 4.1],
      [13, 287, 13.5]
    ]
  },
  visualMap: {
    show: false,
    dimension: 2, // means the 3rd column
    min: 2, // lower bound
    max: 15, // higher bound
    inRange: {
      // Size of the bubble.
      symbolSize: [5, 60]
    }
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter'
  }
};

ライブ

Q：encodeにマッピングを指定しましたが、機能しません。なぜですか？

A：スペルミスがないか確認してください。たとえば、encodeで次元名'Life Expectancy'を'Life Expectency'と誤って記述している可能性があります。

ビジュアルチャネルマッピング

visualMap を使用して視覚チャネルをマッピングできます。visualMap のドキュメントで詳細を確認してください。例を以下に示します。

チャートの形式

ほとんどの通常のチャートでは、データは二次元テーブル形式で記述するのに適しています。「MS Excel」や「Numbers」のようなよく知られたソフトウェアはすべて二次元テーブルを使用しています。それらのデータはJSON形式でエクスポートし、dataset.sourceに入力することで、データ処理の手順をいくつか省くことができます。

dsvやPapaParseなどのツールを使用して、.csvファイルをJSONに変換できます。

後述の例のように、JavaScriptでのデータ伝送では、二次元データを二次元配列で直接格納できます。

二次元配列以外にも、datasetは一般的な方法であるキーバリューペアの使用もサポートしています。ただし、現時点ではseriesLayoutByはこの形式ではサポートされていません。

dataset: [
  {
    // column by column key-value array is a normal format
    source: [
      { product: 'Matcha Latte', count: 823, score: 95.8 },
      { product: 'Milk Tea', count: 235, score: 81.4 },
      { product: 'Cheese Cocoa', count: 1042, score: 91.2 },
      { product: 'Walnut Brownie', count: 988, score: 76.9 }
    ]
  },
  {
    // row by row key-value
    source: {
      product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
      count: [823, 235, 1042, 988],
      score: [95.8, 81.4, 91.2, 76.9]
    }
  }
];

複数のデータセットを参照する方法

EChartsは、複数のデータセットを同時に定義することをサポートしています。シリーズは、series.datasetIndexによって参照するものを割り当てることができます。例：

var option = {
  dataset: [
    {
      // 1st Dataset
      source: []
    },
    {
      // 2nd Dataset
      source: []
    },
    {
      // 3rd Dataset。
      source: []
    }
  ],
  series: [
    {
      // Use 2nd dataset
      datasetIndex: 1
    },
    {
      // Use 1st dataset
      datasetIndex: 0
    }
  ]
};

ECharts 3でのseries.data

ECharts 4は、ECharts 3でのデータ宣言方法を依然としてサポートしています。シリーズが既にseries.dataを宣言している場合は、datasetではなくseries.dataを使用します。

option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};

実際、series.dataは常に存在する重要な設定方法です。treemap、graph、linesのような、一部の特殊なテーブル形式ではないチャートは、datasetで編集できず、series.dataを使用する必要があります。言い換えれば、大量のデータ（100万件以上）をレンダリングするには、datasetではサポートされていないappendDataを使用する必要があります。

その他

現在、以下のチャートがdatasetをサポートしています：line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。EChartsは将来的にさらに多くのチャートをサポートする予定です。

最後に、複数のチャートがリンクインタラクションを持つ1つのdatasetを共有する例を示します。

貢献者 GitHubでこのページを編集