如何动态创建时间轴图表点击x范围图表在高图表角度

Question

[在此处输入图像描述][1]我想实现下图中给出的设计。在这里，我必须显示任务及其在不同日期时间的相关活动。主任务显示为x范围图表类型，当我们单击特定的x范围栏或展开除类别之外的折叠按钮时，它应该动态生成活动时间表，其中包含显示主任务活动日期的符号。它应该为不同类型的活动显示不同的符号，比如活动的触发日期、计划日期或到期日期。

还有一件事，我必须在x范围栏上显示不同的颜色，只要主任务中的一个或多个活动在同一日期。时间线图中的符号可以在触发时重叠，某些活动的计划日期可以相同。

如果你想检查的话，我刚刚为它创建了示例代码。我还没有做到，我需要帮助才能做到这一点。请帮忙。

以下是stackblitz 的链接

https://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html

要实现的图表设计(https://i.stack.imgur.com/PmPn4.jpg)

请参阅此图：https://i.stack.imgur.com/Cju0A.jpg

Answer 1

我用两个自定义函数做了一个例子。第一个将通缉系列作为折叠添加到主系列中，第二个将其销毁

显示新系列的功能：

function showTasks(newSeries, point) {
var series = point.series,
chart = series.chart,
newYCat = [...chart.yAxis[0].categories];
// Set points to higher y to make a space for collapsed points
chart.series.forEach(s => {
s.points.forEach(p => {
if (p.y > point.y) {
p.update({
y: p.y + 1
}, false, false)
}
})
})
// Add collapsed series
chart.addSeries(newSeries);
// Set point flag
point.clicked = true;
// Add the series name to the yAxis cat array
newYCat.splice(newSeries.yPos, 0, newSeries.name);
// Update the yAxis 
chart.yAxis[0].update({
categories: newYCat,
})
}

我认为这里已经澄清了一切——我在评论中留下了说明。

API使用的选项：

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Axis#update

隐藏功能的作用正好相反。

函数是在点中触发的。events。单击回调，应该在此处定义到此点的折叠序列。

演示：https://jsfiddle.net/BlackLabel/cftod6q4/

API：https://api.highcharts.com/highcharts/series.line.events.click