组合图中滚动条如何设置？-灵析社区
D_Y_大师类似这样的组合图，通常有多个轴或多个数据区域，我应该如何配置滚动条从而使其控制指定区域的滚动？ 
七安前解决方案 Solution
对于简单的组合图而言，您可以像普通图表一样声明滚动条，只需声明表示位置的属性"scrollBar.orient"和表示视口范围的属性"scrollBar.start"和"scrollBar.end"即可，如下图所示：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/e001f2db12c399aa30be5b344644225d.png)
而对于复杂图表而言，您需要两个配置步骤：
1. 为滚动条绑定坐标轴：
通过"scrollBar.axisIndex"或"scrollBar.axisId"将滚动条与坐标轴进行关联，方可基于坐标轴进行数据筛选或图元范围滚动操作。
2. 为滚动条声明布局位置：
您图中涉及的图表是基于grid布局绘制的，所以需要定义滚动条的布局位置。
* 首先，需要在"grid.row"的行数声明中添加一行用于放置横向滚动。
* 其次，需要在"grid.elements"中声明滚动条的布局信息{
modelId: 'scrollBar', // id
col: 0, // col index
row: 6 // row index
},
* 最后，需要将"scrollBar.id"与"grid.elements"中的"modelId"对应起来。
* Finally, you need to match "scrollBar.id" with the "modelId" in "grid.elements".
代码示例 Code Example
const leftAxesCommonSpec = {
expand: { max: 0.2 },
label: { flush: true, visible: true },
tick: { visible: false },
forceTickCount: 3
};
const spec = {
type: "common",
layout: {
type: "grid",
col: 2,
row: 7,
elements: [
{
modelId: "legend",
col: 0,
colSpan: 2,
row: 6
},
{
modelId: "scrollBar",
col: 0,
colSpan: 2,
row: 5
},
{
modelId: "Social Penetration",
col: 1,
row: 0
},
{
modelId: "Engagement - Socialization",
col: 1,
row: 1
},
{
modelId: "Penetration of Private Messages",
col: 1,
row: 2
},
{
modelId: "Number of Private Messages per User",
col: 1,
row: 3
},
{
modelId: "Social Penetrationleft",
col: 0,
row: 0
},
{
modelId: "Engagement - Socialization-left",
col: 0,
row: 1
},
{
modelId: "Penetration of Private Messagesleft",
col: 0,
row: 2
},
{
modelId: "Number of Private Messages per Userleft",
col: 0,
row: 3
},
{
modelId: "Number of Private Messages per User-bottom",
col: 1,
row: 4
}
]
},
region: [
{
id: "Social Penetration"
},
{
id: "Engagement - Socialization"
},
{
id: "Penetration of Private Messages"
},
{
id: "Number of Private Messages per User"
}
],
scrollBar: [
{
orient: "bottom",
axisIndex: 4,
id: "scrollBar",
start: 0,
end: 0.4,
filterMode: "axis"
}
],
legends: {
padding: {
top: 10
},
visible: true,
orient: "bottom",
id: "legend",
regionId: [
"Social Penetration",
"Engagement - Socialization",
"Penetration of Private Messages",
"Number of Private Messages per User"
]
},
seriesField: "type",
tooltip: {
dimension: {
title: {
value: (datum) => {
return `第 ${datum.x} 天`;
}
},
content: [
{
key: (datum) => datum.type,
value: (datum) => datum.y
}
]
}
},
series: [
{
id: "Social Penetrationseries0",
regionId: "Social Penetration",
type: "line",
data: { id: "Social Penetration" },
xField: "x",
yField: "y"
},
{
id: "Engagement - Socialization-series0",
regionId: "Engagement - Socialization",
type: "line",
data: { id: "Engagement - Socialization" },
xField: "x",
yField: "y"
},
{
id: "Penetration of Private Messagesseries0",
regionId: "Penetration of Private Messages",
type: "line",
data: { id: "Penetration of Private Messages" },
xField: "x",
yField: "y"
},
{
id: "Number of Private Messages per Userseries0",
regionId: "Number of Private Messages per User",
type: "line",
data: { id: "Number of Private Messages per User" },
xField: "x",
yField: "y"
}
],
axes: [
{
id: "Social Penetrationleft",
regionId: "Social Penetration",
orient: "left",
title: { visible: true, text: "SP" },
...leftAxesCommonSpec
},
{
id: "Engagement - Socialization-left",
regionId: "Engagement - Socialization",
orient: "left",
title: { visible: true, text: "ES" },
...leftAxesCommonSpec
},
{
id: "Penetration of Private Messagesleft",
regionId: "Penetration of Private Messages",
orient: "left",
title: { visible: true, text: "Penetration of PM" },
...leftAxesCommonSpec
},
{
id: "Number of Private Messages per Userleft",
regionId: "Number of Private Messages per User",
orient: "left",
title: { visible: true, text: "PM per User" },
...leftAxesCommonSpec
},
{
id: "Number of Private Messages per User-bottom",
regionId: [
"Social Penetration",
"Engagement - Socialization",
"Penetration of Private Messages",
"Number of Private Messages per User"
],
orient: "bottom",
label: {
firstVisible: true,
lastVisible: true,
visible: true
},
tick: { visible: false },
paddingInner: 0.99,
paddingOuter: 0
}
]
};
const dataJson = {
"Social Penetration": [
{
x: 0,
y: 1.2020804451630671,
originXData: "2022-03-08",
type: "Social Penetration"
},
{
x: 1,
y: 1.911162758594358,
originXData: "2022-03-09",
type: "Social Penetration"
},
// ...
],
"Engagement - Socialization": [
{
x: 0,
y: 0.7782279444864411,
originXData: "2022-03-08",
type: "Engagement - Socialization \n\n"
},
{
x: 1,
y: 0.6970763116149991,
originXData: "2022-03-09",
type: "Engagement - Socialization \n\n"
},
// ...
],
"Penetration of Private Messages": [
{
x: 0,
y: 0.21493020207806002,
originXData: "2022-03-08",
type: "Penetration of Private Messages"
},
{
x: 1,
y: 0.31807068769079905,
originXData: "2022-03-09",
type: "Penetration of Private Messages"
},
// ...
]
};
spec.series.forEach((s) => {
s.data.values = dataJson[s.data.id];
});
结果展示 Results
在线效果参考："https://codesandbox.io/s/common-chart-with-scrollbar-n5t8ps" (https://link.segmentfault.com/?enc=12Ujneyfi4D3%2B82tW16wrg%3D%3D.lyiTlmr4m%2FUkLi5qFTrFJmPYuHpuF4VcYyybLWr72ZXX14JOf9EqraSoqL1zoQuyOWLrWyP0x4V8WvyST%2BP4cg%3D%3D)
相关文档 Related Documentation
ScrollBar demo："https://www.visactor.io/vchart/demo/scrollbar/basic-scrollbar-bar-chart" (https://link.segmentfault.com/?enc=7ax0rdyrtkyUPCQOd8clhQ%3D%3D.u2hCJLhQqt3KGRMpqZFY7yayDyv4ZxdHHTQUJqD5O8YQCgcjuoe4p0fAZg3NnllGJJxfR3yfwi%2BjrCY%2FUJnVjbbbOjHIOzuFJ5tAuDBgZhE%3D)
滚动条教程："https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Scrollbar" (https://link.segmentfault.com/?enc=aurleJjLmtShplfbrtuv0A%3D%3D.WE9c0gJyPl9N1l3d1YRbn9iSHN8IJwsA9i47Nlc8XKBNoqAb%2Fi1h5QOgLlqBaW4%2FeFMoawzTVxuha%2FHpW2SYzrgYhcX4ZRUvcn%2BexODQY7w%3D)
相关api："https://www.visactor.io/vchart/option/commonChart#scrollbar" (https://link.segmentfault.com/?enc=YKbWS6WUCdu%2BohWj1KHmAA%3D%3D.1voGQdMCB6qWmixef45mPSbo4VTm7XjaDq%2BPq5iRrtg1vEWV7F84sO%2BNHPNqXw133R5SxgpIYMISebYi%2FxFTbA%3D%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=OX4tVAjgndPkg0B41n0EWA%3D%3D.L3So8yjcu%2Fa%2BDBfjPS8oiHyLnipqYpTC0H6nNxxB5%2BvlXOONVAmDsqQQSlgahkLe)