如何在单击highcharts angular中的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

我做了一个带有 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