tips: 数据的属性对应几何标记，比如 age 属性为一个点，那么 age=15 可能是水平方向一条由点连接成的 15 长度的直线，所以视觉通道为属性对应的几何元素和值对应的通道组合而成的图案
争渡
// 班级映射到位置,人数到数值
chart.interval().position("班级" * "人数");
// 班级映射到位置,人数到数值
// 班级映射到颜色
chart.interval().position("班级*人数").color("班级");
// 班级和颜色共同决定了颜色的映射所以为n:1
chart
.interval()
.position("班级*人数")
.color("班级*人数", (grade, count) => {
if (grade == "1" || count > 40) {
return "red";
}
return "green";
});
chart.<geomType>().<attrType>(dims, [callback]);
点，线，面这些几何图形，不同的几何标记包含对应的 Attribute
每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。
// 配置坐标轴
char.axis();
char.axis("x", {
title: {
style: {
fill: "#1890ff",
},
},
});
demo
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const chart = new Chart({
container: 'mountNode',
autoFit: false,
width: 400,
height: 300,
});
// 设置数据
chart.data(data)
// key对应维度的标题
chart.scale('sales',{
alias:'销售量'
})
chart.axis('sales', {
title: {},
});
// 位置year,值sales 建立视觉通道
chart.interval().position('year*sales')
// 渲染
chart.render()
图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。
chart.legent("x", false);
chart.legent("x", {
position: "bottom",
});
当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。
// 展示 Tooltip 辅助线
chart.tooltip({
showCrosshairs: true,
});
// 散点图在xy辅助线上显示数据
chart.tooltip({
showCrosshairs: true,
crosshairs: {
type: "xy",
text: (type, defaultText, items) => {
const color = items[0].color;
if (type === "x") {
return {
offset: 5,
position: "end",
content: defaultText + " cm",
style: {
textAlign: "center",
textBaseline: "top",
fontSize: 14,
fontWeight: "bold",
},
};
}
return {
offset: 5,
content: defaultText + " kg",
style: {
textAlign: "end",
fontSize: 14,
fontWeight: "bold",
},
};
},
textBackground: null,
},
});
// 雷达图
chart.tooltip({
shared: true, // 合并数据项
follow: true, // tooltip 跟随鼠标
showCrosshairs: true, // 展示 crosshairs
crosshairs: {
// 配置 crosshairs 样式
type: "xy", // crosshairs 类型
line: {
// crosshairs 线样式
style: {
stroke: "#565656",
lineDash: [4],
},
},
},
});
// 使用label将数值标注在chart上
chart.line().position("year*value").label("value");
chart
.polygon()
.position("longitude*latitude")
.label("name", {
layout: {
// this
type: "fixed-overlap",
},
offset: 0,
style: {
fill: "black",
stroke: "#fff",
lineWidth: 2,
},
});
标注类型
// 语法
chart.annotation().<type>({})
// 清空
chart.annotation().clear()
// 清空图形标注和配置
chart.annotation().clear(true)
数据范围的选择插件
chart.option("slider", {
end: 0.8,
});
chart.option("scrollbar", {
// 滚动条类型： 'horizontal' / 'vertical'
type: "horizontal",
});
图表类型
将交互拆分为几个环节
每个环节拆分为两步
初始状态-> 交互状态-> 新状态-> 交互回滚
初始状态-> 交互状态-> 持续交互-> 新状态-> 交互回滚
初始状态-> 交互状态-> 持续交互-> 交互取消-> 交互回滚
1.相同的触发，不同的反馈
框选过滤图形交互：触发——鼠标移入 view，反馈——鼠标变成“十字”；触发——拖拽，反馈——出现框选 mask；
拖拽 view 交互：触发——鼠标移入 view ，反馈——鼠标变成”手型“，触发——拖拽，反馈—— view 移动。
2.不同的触发，相同的反馈
点击 view 的绘图区域交互：触发——点击，反馈——显示临近的图形的 tooltip；
在 view 的绘图区域移动交互：触发——移动，反馈——显示临近图形的 tooltip。
触发对象主要有
语法
一个触发 Trigger 是对象名称与事件名称的组合
interval: click;
Action 对触发进行响应，Action 的对象必须与前面的对象触发关联
反馈的结果，无法直接用 name + method 来定义，可以在回调函数中指定，为了组合成交互语法，每个 Action 可以事先定义，在交互语法中直接指定 Action 名称即可。
组合多个视图(图表)为一个图表
const chart = new Chart({
container: "container",
autoFit: true,
height: 400,
padding: [10, 40, 40, 40],
});
const kView = chart.createView({
region: {
start: { x: 0, y: 0 },
end: { x: 1, y: 0.7 },
},
});
kView.Schema().position();
const barView = chart.createView({
region: {
start: { x: 0, y: 0.7 },
end: { x: 1, y: 1 },
},
});
barView.Schema().line();
chart
.interval()
.position("State*population")
.color("age", (age) => {
return colorMap[age];
})
.tooltip("age*population", (age, population) => {
return {
name: age,
value: population,
};
})
// 调整数据
.adjust([
{
type: "dodge",
dodgeBy: "type", // 按照 type 字段进行分组
marginRatio: 0, // 分组中各个柱子之间不留空隙
},
{
type: "stack",
},
]);