Angular2 中的泳道 ngx-图表 - 单个折线图上的不同样式

Question

我有一个折线图，X 轴上有日期。在某个日期之后，我希望这条线是不同的颜色。这可能使用 ngx-charts 吗？

Answer 1

让我们假设您要在其后更改颜色的日期为 T。

现在您可以将系列分成两部分

从开始日期到 T
从 T 到结束日期。

现在您可以为不同的系列使用不同的颜色绘制图表

以下数据将生成所需的图表。

var data = [
  {
    "name": "Current",
    "series": [
      {
        "value": 5599,
        "name": "2016-09-20T01:04:28.176Z"
      },
      {
        "value": 6247,
        "name": "2016-09-20T12:51:24.713Z"
      },
      {
        "value": 4283,
        "name": "2016-09-18T15:42:04.800Z"
      },
      {
        "value": 2643,
        "name": "2016-09-13T20:10:53.904Z"
      },
      {
        "value": 4105,
        "name": "2016-09-18T06:15:10.845Z"
      },
      {
        "name": "2016-09-18T13:08:42.085Z",
        "value": 4401
      },
      {
        "name": "2016-09-20T01:04:28.176Z",
        "value": 3443
      }
    ]
  },
  {
    "name": "Future",
    "series": [
      {
        "value": 3443,
        "name": "2016-09-20T01:04:28.176Z"
      },
      {
        "value": 2604,
        "name": "2016-09-20T12:51:24.713Z"
      },
      {
        "value": 2158,
        "name": "2016-09-18T15:42:04.800Z"
      },
      {
        "value": 5519,
        "name": "2016-09-13T20:10:53.904Z"
      },
      {
        "value": 4532,
        "name": "2016-09-18T06:15:10.845Z"
      },
      {
        "name": "2016-09-18T13:08:42.085Z",
        "value": 2474
      }
    ]
  }
]

Angular2 中的泳道 ngx-图表 - 单个折线图上的不同样式

Swimlane ngx-charts in Angular2 - Different styles on a single line chart

javascript

angular

charts

ngx-charts