组合图中滚动条如何设置？-灵析社区
七安前## 解决方案 Solution 对于简单的组合图而言，您可以像普通图表一样声明滚动条，只需声明表示位置的属性`scrollBar.orient`和表示视口范围的属性`scrollBar.start`和`scrollBar.end`即可，如下图所示：  而对于复杂图表而言，您需要两个配置步骤： 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)