凡例

凡例は、異なるカテゴリを示すために、異なる色、形状、テキストを使用してチャートの内容に注釈を付けるために使用されます。凡例をクリックすると、ユーザーは対応するカテゴリを表示または非表示にすることができます。凡例はチャートを理解するための鍵の1つです。

レイアウト

凡例は常にチャートの右上に配置されます。同じページ内のすべての凡例は、チャート全体のスペースのレイアウトを考慮して、水平または垂直に整列させる必要があります。チャートの垂直方向のスペースが少なすぎる場合、またはコンテンツ領域が混雑している場合は、凡例をチャートの下部に配置することも良い選択肢です。凡例のレイアウトの例を次に示します。

option = {
  legend: {
    // Try 'horizontal'
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  dataset: {
    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]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
ライブ

凡例が多い場合は、スクロール可能なコントロールを使用してください。

option = {
  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x']
    // ...
  }
  // ...
};

スタイル

暗い色の背景の場合は、背景を半透明に変更しながら、背景レイヤーとテキストに明るい色を使用してください。

option = {
  legend: {
    data: ['Legend A', 'Legend B', 'Legend C'],
    backgroundColor: '#ccc',
    textStyle: {
      color: '#ccc'
      // ...
    }
    // ...
  }
  // ...
};

凡例の色には、多くの設計方法があります。チャートの種類によって、凡例のスタイルが異なる場合があります。

option = {
  legend: {
    data: ['Legend A', 'Legend B', 'Legend C'],
    icon: 'rect'
    // ...
  }
  // ...
};

インタラクティブ

環境の要求に応じて、凡例はインタラクティブな操作をサポートできます。凡例をクリックすると、対応するカテゴリが表示または非表示になります。

option = {
  legend: {
    data: ['Legend A', 'Legend B', 'Legend C'],
    selected: {
      'Legend A': true,
      'Legend B': true,
      'Legend C': false
    }
    // ...
  }
  // ...
};

ヒント

凡例は状況に応じて使用する必要があります。一部の2軸チャートには、複数のチャートタイプが含まれています。異なる種類の凡例スタイルを区別する必要があります。

option = {
  legend: {
    data: [
      {
        name: 'Legend A',
        icon: 'rect'
      },
      {
        name: 'Legend B',
        icon: 'circle'
      },
      {
        name: 'Legend C',
        icon: 'pin'
      }
    ]
    //  ...
  },
  series: [
    {
      name: 'Legend A'
      //  ...
    },
    {
      name: 'Legend B'
      //  ...
    },
    {
      name: 'Legend C'
      //  ...
    }
  ]
  //  ...
};

チャートにデータの種類が1つしかない場合は、凡例ではなくチャートタイトルを使用して説明してください。

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

pissang pissang