Nuages ​​ngx de couloir dans Angular2 - Différentes couleurs sur un seul trait de ligne

Question

J'ai un seul graphique linéaire, avec des dates sur l'axe X. Après une certaine date, je voudrais que la ligne soit une couleur différente. Est-ce possible en utilisant ngx-charts?

Answer 1

Supposons la date après laquelle vous voulez changer la couleur comme T.

Maintenant, vous pouvez diviser la série en 2 parties

1. La date de début de début à T
2. De T à la date de fin.

Et vous pouvez maintenant tracer le graphique en utilisant différentes couleurs pour différentes séries

Les données suivantes va générer le graphique désiré.

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 
 
     } 
 
    ] 
 
    } 
 
]