如何向图表添加高亮标记/区域？ [英] How to add a highlight mark/area to a chart?

问题描述

我有一个使用D3 js创建的时间系列图表。我想添加高亮区域某些时间间隔，以显示在该特定时间发生的某些活动（将有不同类型的活动，所以每个高亮标记将根据其类型具有不同的颜色）。

I have a time series chart created using D3 js. I wanted to add highlight areas for certain time intervals to show certain activity occurred during that particular time (there will be different types of activities so each highlight mark will have different color based on its type). I want this highlight area to cover the whole chart vertically from top to bottom.

下面是一个示例：

Here is a sample:

我遇到了这个问题，显示如何使用highcharts。

I came across this question which shows how to do it using highcharts.

使用另一个图表库，我绘制一个面积图，每当我想显示这样的高亮区域。是否有更好的方法使用d3 js或者我应该绘制一组面积图？

As of now I use another charting library and I draw an area chart whenever I want to display such highlight areas. Is there a better way to do it using d3 js or should I draw a set of area charts?

推荐答案

一旦。时间。

您可以将区域和折线图组合在一起。

You can combine area and line chart together.

// 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 。

Here's an example of AAPL stock chart with highlight from 2012-04-13 to 2012-04-17.

http://vida.io/documents/TzcZJX4itBebKciQZ

完整代码：

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

这篇关于如何向图表添加高亮标记/区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！