antv f2 チャートパラメータの詳細な説明

面グラフ

折れ線グラフはよく使用されるグラフィックの一種で、比較的簡単です。G2 には特定のグラフの種類 (ヒストグラム、散布図、折れ線グラフなど) の概念はありません。ユーザーは、次のような特定の種類のグラフを個別に描画できます。円グラフのほかに、折れ線グラフとヒストグラムの組み合わせなどの混合グラフを描画することもできます。折れ線グラフと面グラフを組み合わせると、図に示す効果が得られます。

共通パラメータのドキュメント

属性	説明する	タイプ	デフォルト
容器	チャートによって描画される DOM を指定します。DOM ID を渡すか、DOM インスタンスを直接渡すことができます。	文字列 \| HTML要素	-
自動フィット	チャートがコンテナの幅と高さに適応するかどうか。ユーザーが高さを設定した場合、ユーザーが設定した高さが優先されます。	ブール値	間違い
幅	チャートの幅	番号	-
身長	チャートの高さ	番号	-
パディング	チャートのパディング	'自動'\|数値\|数値[]	「自動」

メートルスケール

属性	説明する	タイプ	デフォルト
分	対応する座標系の最小値を設定します	どれでも	-
最大	対応する座標系の最小値を設定します	どれでも	-
範囲	通常、座標系の描画範囲を変更する必要はありません。	[数字、数字]	[0, 1]
エイリアス	データフィールドの表示エイリアスは通常、フィールドの対応する中国語名を設定するために使用されます。	弦	-
ニース	最小値、最大値を自動的に調整	ブール値	間違い

プロンプトツールチップ

属性	説明する	タイプ	デフォルト
ショータイトル	ツールチップのタイトルを表示するかどうか	ブール値	間違い
共有	true は、現在のポイントに対応するすべてのデータを結合して表示することを意味し、false は、現在のポイントに最も近いデータ内容のみを表示することを意味します	ブール値	間違い
show十字線	ツールチップの補助線を表示するかどうか。	ブール値	間違い

座標系の軸

属性	説明する	タイプ	デフォルト
ライン	座標軸の設定項目、nullは表示しないことを意味します	ヌル \| 物体	-
ティックライン	座標軸目盛り線の設定項目、nullは表示しないことを意味します	ヌル \| 物体	-
グリッド	座標軸グリッド線の設定項目、nullは表示しないことを意味します	ヌル \| 物体	-

チャート.ライン(オプション)

折れ線グラフ、曲線グラフ、ラダー折れ線グラフなどを描画するために使用されます。

chart.area(オプション)

面グラフ（面グラフ）、積み上げ面グラフ、区間面グラフなどを描画するために使用されます。

geom.position()

位置チャネルマッピングルールを構成する

例：

// 数据结构: [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');

geom.color()

グラフの色の構成

// 基础颜色设置
geom.color('#1890ff');
// 渐变
geom.color("l(90) 0:#0b83de 1:#0c1c2d")

geom.shape()

グラフィックス関連の設定。ドキュメント上の説明はあまり完全ではありません。チャートの例から対応する情報を取得できます。

属性	説明する
スムーズ	折れ線グラフのスムージング設定の場合

<template>
  <div id="container"></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 数据源
    const data = [
      { time: "8/1", value: 240 },
      { time: "8/10", value: 600 },
      { time: "8/20", value: 350 },
      { time: "8/31", value: 470 },
    ];
    // 初始化图表，列出图表属性
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [100, 20, 30, 40],
    });
    // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("time*value")
    // 前面为x轴，所以 time 为 x 轴， value 为 y 轴
    chart.data(data);
    // 度量
    // x，y轴坐标系是根据
    chart.scale({
      // y轴坐标系设置
      value: {
        min: 0,
        nice: true,
        alias: "用户",
      },
      // x轴坐标系设置
      time: {
        range: [0, 1],
      },
    });
    // 提示信息
    chart.tooltip({
      // 是否显示辅助线
      showCrosshairs: true,
      // 是否合并所有点展示
      shared: false,
    });
    // value 坐标系设置
    chart.axis("value", {
      grid: null,
      tickLine: null,
    });
    // time 坐标系设置
    chart.axis("time", {
      line: null,
      tickLine: null,
    });
    // 图表绘制设置
    // 面积图
    chart
      .area()
      .position("time*value")
      .color("l(90) 0:#0b83de 1:#0c1c2d")
      .shape("smooth");
    // 折线图
    chart.line().position("time*value").color("#0b83de").shape("smooth");
    // 渲染图表
    chart.render();
  },
};
</script>

antv f2 チャートパラメータの詳細な説明

面グラフ

おすすめ