const data = [
  { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  { feature: 'Design', value: 0.17, phone: 'iPhone' },
  { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  { feature: 'Large', value: 0.02, phone: 'iPhone' },
  { feature: 'Price', value: 0.21, phone: 'iPhone' },
  { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  { feature: 'Brand', value: 0.16, phone: 'Samsung' },
  { feature: 'Contract', value: 0.35, phone: 'Samsung' },
  { feature: 'Design', value: 0.13, phone: 'Samsung' },
  { feature: 'Internet', value: 0.2, phone: 'Samsung' },
  { feature: 'Large', value: 0.13, phone: 'Samsung' },
  { feature: 'Price', value: 0.35, phone: 'Samsung' },
  { feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  { feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  { feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  { feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  { feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  { feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  { feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  { feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  { feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
];
const chart = new Chart({
  container: 'c1',
  autoFit: false,
  width: 600,
  height: 300,
});
chart.data(data);
chart.point().position('feature*value');
chart.render();

首先創(chuàng)建了一個chart對象

const chart = new Chart({
? container: 'c1',
? autoFit: false,
? width: 600,
? height: 300,
})

然后我們填充相應的data

chart.data(data);

再進行圖形設置(point)以及相應坐標的設置(position)

chart.point().position('feature*value');

最后進行圖像繪制

chart.render();

第二步設置坐標軸的外觀與度量

外觀axis設置

在g2中我們使用axis設置坐標軸的外觀的顯示特性，我們一般可以不用設置。相關設置可以參考官方 axis API。

度量配置

G2 中的度量 (Scale) 是一個非常重要的概念，用于定義數據的類型和展示方式，在下列方面起到重要的作用：

生成坐標軸刻度值
顯示圖例項
格式化數據展示的文本

G2 中提供了下面幾種度量，也就是連續(xù)和分類兩個大類別

identity，常量類型的數值，也就是說數據的某個字段是不變的常量
linear，連續(xù)的數字 [1, 2, 3, 4, 5]
cat，分類，[‘男’, ‘女’]
time，連續(xù)的時間類型
log，連續(xù)非線性的
Log，數據將 [1, 10, 100,1000] 轉換成 [0, 1, 2, 3]
pow，連續(xù)非線性的pow 數據將 [2, 4, 8, 16, 32] 轉換成 [1,2, 3, 4, 5]
timeCat，非連續(xù)的時間，比如股票的時間不包括周末或者未開盤的日期
quantize，分段度量，例如[0-100, 100-200, 200-300] 在一個區(qū)間內映射到一個值上
quantile，密度分段度量，會根據數據的分布自動計算一個個的區(qū)間段

度量使用scale函數進行配置，scale(field: string, scaleOption) 設置單個坐標，scale(cfg)批量設置。

坐標度量的通用配置項有：

坐標軸的刻度和范圍是由g2自動生成的，我們可以設置min，max數值范圍、ticks數組自定義坐標軸顯示的刻度文本及刻度數量，formatter自定義刻度格式，tickCount刻度數量、tickInterval刻度間距。

第二步創(chuàng)建view

G2 的圖表 Chart，可以創(chuàng)建多個視圖 View，每個 View 各自又可以創(chuàng)建其子 View，即在 G2 4.0 中，View 是支持嵌套的。每個 View 同 Chart 一樣，擁有自己獨立的數據源、坐標系、幾何標記、Tooltip 以及圖例，你可以這樣理解，其實 Chart 也是一種特殊的 View，在類結構設計上，Chart 和 View 的關系如下：

也就是view繼承子chart，所以我認為我們在chart設置的屬性，view也會繼承過來，所以部分配置無需我們在進行單獨設置。

const view = chart.createView({
  region: {
    start: { x: 0.2, y: 0.2 }, // 指定該視圖繪制的起始位置，x y 為 [0 - 1] 范圍的數據
    end: { x: 1, y: 1 }, // 指定該視圖繪制的結束位置，x y 為 [0 - 1] 范圍的數據
  },
  padding: [20, 40], // 指定視圖的留白
});

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: