如何在 highcharts 中单击 x-range 图表动态创建时间线图表 angular
How to dynamically create timeline chart on click of x-range chart in highcharts angular
[在此处输入图片描述][1]我想实现图片中给出的设计 below.Here 我必须在不同的日期时间显示任务及其相关活动。主要任务显示为 x 范围图表类型,当我们单击特定的 x 范围栏或展开类别旁边的折叠按钮时,它应该动态生成活动时间线图表,其中的符号显示主要任务的活动日期。它应该为不同类型的活动显示不同的符号,比如 activity 的触发日期、计划日期或截止日期。
还有一件事,只要主任务中的一个或多个活动在同一日期,我就必须在 x 范围栏上显示不同的颜色。并且时间线图表中的符号可以重叠,因为某些活动的触发日期和计划日期可以相同。
我刚刚为它创建了示例代码,如果你想检查的话。
我还没有实现它,我需要帮助来实现它。
请帮忙。
下面是 stackblitz
的 link
https://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html
要实现的图表设计(https://i.stack.imgur.com/PmPn4.jpg)
参考这张图片:https://i.stack.imgur.com/Cju0A.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
[在此处输入图片描述][1]我想实现图片中给出的设计 below.Here 我必须在不同的日期时间显示任务及其相关活动。主要任务显示为 x 范围图表类型,当我们单击特定的 x 范围栏或展开类别旁边的折叠按钮时,它应该动态生成活动时间线图表,其中的符号显示主要任务的活动日期。它应该为不同类型的活动显示不同的符号,比如 activity 的触发日期、计划日期或截止日期。
还有一件事,只要主任务中的一个或多个活动在同一日期,我就必须在 x 范围栏上显示不同的颜色。并且时间线图表中的符号可以重叠,因为某些活动的触发日期和计划日期可以相同。
我刚刚为它创建了示例代码,如果你想检查的话。 我还没有实现它,我需要帮助来实现它。 请帮忙。
下面是 stackblitz
的 linkhttps://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html
要实现的图表设计(https://i.stack.imgur.com/PmPn4.jpg)
参考这张图片:https://i.stack.imgur.com/Cju0A.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