[[在此处输入图片描述] [1]我要实现下图给出的设计。在这里,我必须显示任务及其在不同日期时间的相关活动。主要任务显示为x范围图表类型,当我们单击类别之外的特定x范围栏或展开折叠按钮时,它应动态生成活动时间线图表,并带有符号以显示主要任务的活动日期。并且对于不同类型的活动,它应该显示不同的符号,例如活动的触发日期,计划的或到期日期。
还有另外一件事,我必须在x范围栏上显示不同的颜色,只要主要任务中的一项或多项活动在同一日期。时间线图表中的符号可以重叠,因为某些活动的触发日期和计划日期可以相同。
我只是为此创建了示例代码,如果要检查。我尚未实现这一目标,因此需要帮助。请帮助。
下面是stackblitz的链接
https://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html
要实现的图表设计(https://i.stack.imgur.com/PmPn4.jpg)
我做了一个带有2个自定义函数的示例。第一个将想要的序列作为折叠添加到主要序列中,第二个将其破坏。
显示新系列的功能:
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
隐藏功能执行相反的操作。
函数在point.events.click回调中触发,应在此处定义折叠系列。
演示:https://jsfiddle.net/BlackLabel/cftod6q4/
API:https://api.highcharts.com/highcharts/series.line.events.click