データのビジュアルマップ

データの可視化とは、データを視覚的要素にマッピングする手順です。この手順はビジュアルコーディングとも呼ばれ、視覚的要素はビジュアルチャネルとも呼ばれます。

Apache EChartsTM のすべてのタイプのチャートには、このマッピング手順が組み込まれています。たとえば、折れ線グラフはデータを *線* にマッピングし、棒グラフはデータを *高さ* にマッピングします。 graph、themeRiver、treemap など、より複雑なチャートには、独自の組み込みマッピングがあります。

さらに、EChartsは、一般的なビジュアルマッピングのために visualMap コンポーネント を提供しています。 visualMap コンポーネントで許可されている視覚要素は次のとおりです。

  • symbol、symbolSize
  • color、opacity、colorAlpha、
  • colorLightness、colorSaturation、colorHue

次に、visualMap コンポーネントの使用方法を紹介します。

データと次元

データは通常、EChartsの series.data に格納されます。リスト、ツリー、グラフなど、チャートの種類によっては、データの形式が多少異なる場合があります。ただし、それらには共通の機能があります。それは、データ項目のコレクションであるということです。すべてのデータ項目には、データ値と、必要に応じてその他の情報が含まれています。各データ値は、単一の値（1次元）または配列（複数次元）にすることができます。

たとえば、series.data は最も一般的な形式であり、一般的な配列である `リスト` です。

series: {
  data: [
    {
      // every item here is a dataItem
      value: 2323, // this is data value
      itemStyle: {}
    },
    1212, // it can also be a value of dataItem, which is a more common case
    2323, // every data value here is one dimension
    4343,
    3434
  ];
}
series: {
  data: [
    {
      // every item here is a dataItem
      value: [3434, 129, 'San Marino'], // this is data value
      itemStyle: {}
    },
    [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case
    [2323, 3223, 'Nauru'], // every data value here is three dimension
    [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,
    // the second dimension to y axis,
    // and the third dimension to symbolSize
  ];
}

通常、最初の1次元または2次元がマッピングに使用されます。たとえば、最初の次元をx軸に、2番目の次元をy軸にマッピングします。より多くの次元を表す場合は、visualMap が必要です。ほとんどの場合、散布図 は半径を使用して3次元を表します。

visualMapコンポーネント

visualMapコンポーネントは、*データのどの次元* から *どの視覚要素* にマッピングするかを定義します。

visualMap.type で識別される、次の2種類のvisualMapコンポーネントがサポートされています。

その構造は次のように定義されます。

option = {
  visualMap: [
    // can define multiple visualMap components at the same time
    {
      // the first visualMap component
      type: 'continuous' // defined as continuous visualMap
      // ...
    },
    {
      // the second visualMap component
      type: 'piecewise' // defined as discrete visualMap
      // ...
    }
  ]
  // ...
};

連続および区分的ビジュアルマッピングコンポーネント

EChartsのビジュアルマッピングコンポーネントは、連続（visualMapContinuous）と区分的（visualMapPiecewise）に分けられます。

連続とは、ビジュアルマッピングのデータ次元が連続値であることを意味し、区分的とは、データが複数のセグメントに分割されているか、離散データであることを意味します。

連続ビジュアルマッピング

連続タイプのビジュアルマッピングでは、最大値と最小値を指定することで、ビジュアルマッピングの範囲を決定できます。

option = {
  visualMap: [
    {
      type: 'continuous',
      min: 0,
      max: 5000,
      dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped
      seriesIndex: 4, // The fourth series is mapped.
      inRange: {
        // The visual configuration in the selected range
        color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping
        // the minimum value of the data is mapped to 'blue', and
        // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.
        // The rest is automatically calculated linearly.
        symbolSize: [30, 100] // Defines the mapping range for the graphic size.
        // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.
        // The maximum value is mapped to 100.
        // The rest is calculated linearly automatically.
      },
      outOfRange: {
        // Check the out of range visual configuration
        symbolSize: [30, 100]
      }
    }
    // ...
  ]
};

ここで、visualMap.inRange は、データマッピング範囲内のデータに使用されるスタイルを示し、visualMap.outOfRange は、マッピング範囲外のデータのスタイルを指定します。

visualMap.dimension は、データのどの次元が視覚的にマッピングされるかを指定します。

区分的ビジュアルマッピング

区分的ビジュアルマッピングコンポーネントには、3つのモードがあります。

セグメント化されたビジュアルマップを使用するには、`type` を `'piecewise'` に設定し、上記の3つの設定項目のいずれかを選択する必要があります。

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

KrzysztofMadejski KrzysztofMadejskipissang pissang