Angular2 中的 Swimlane ngx-charts - 单个折线图上的不同样式答案

【问题标题】：Swimlane ngx-charts in Angular2 - Different styles on a single line chartAngular2 中的 Swimlane ngx-charts - 单个折线图上的不同样式
【发布时间】：2017-08-30 05:30:30
【问题描述】：

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

【问题讨论】：

标签： javascript angular charts ngx-charts

【解决方案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
      }
    ]
  }
]

【讨论】：

如何在Chart.js@Hemant Kumar 中实现这个概念
这会有排序问题。所以正如你所说，它只能用于范围和中间，两个系列应该是互斥的