gpt4 book ai didi

javascript - 如何向图表添加高亮标记/区域?

转载 作者:行者123 更新时间:2023-11-29 17:14:22 27 4
gpt4 key购买 nike

我有一个使用 D3 js 创建的时间序列图表。我想为特定时间间隔添加高亮区域,以显示在该特定时间发生的特定事件(会有不同类型的事件,因此每个高亮标记将根据其类型具有不同的颜色)。我希望这个突出显示区域从上到下垂直覆盖整个图表。

这是一个示例: enter image description here

我遇到了 this question其中展示了如何使用 highcharts 进行操作。

截至目前,我使用另一个图表库,每当我想显示此类突出显示区域时,我都会绘制面积图。使用 d3 js 是否有更好的方法,或者我应该绘制一组面积图?

最佳答案

这个问题我看过一次。例如时间。

您可以将面积图和折线图组合在一起。

// y.domain()[1] so area is drawn to cover all chart
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.x_axis); })
.y0(height)
.y1(function(d) { return y(y.domain()[1]); });

var line = d3.svg.line()
.x(function(d) { return x(d.x_axis); })
.y(function(d) { return y(d.y_axis); });

这是 AAPL 股票图表的示例,其中突出显示了 2012-04-13 到 2012-04-17。

http://vida.io/documents/TzcZJX4itBebKciQZ

完整代码:

https://gist.github.com/dnprock/dea634bfdb3c33149c61

关于javascript - 如何向图表添加高亮标记/区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19235469/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com