使用ngx-charts为特定系列定制颜色

Question

我正在使用D3.js ngx图表的角度包装器，我有一个条形垂直堆叠图表示，但我需要当系列有一个特定值时，系列的颜色是自定义的。这是一个我的结果是如何形成的例子。

[{
name: 'Aug. 2018',
series:[{
    name: "Serie 1",
    value: 2500,
    isVirtual: false
},{
    name: "Serie 2",
    value: 250,
    isVirtual: true
},{
    name: "Serie 3",
    value: 20,
    isVirtual: false
},{
    name: "Serie 4",
    value: 25,
    isVirtual: true
},{
    name: "Serie 5",
    value: 2,
    isVirtual: false
}]
},{
name: 'Sep. 2018',
series:[{
    name: "Serie 1",
    value: 2500,
    isVirtual: false
},{
    name: "Serie 2",
    value: 250,
    isVirtual: false
},{
    name: "Serie 3",
    value: 20,
    isVirtual: false
},{
    name: "Serie 4",
    value: 25,
    isVirtual: false
},{
    name: "Serie 5",
    value: 2,
    isVirtual: false
}]
}]

Answer 1

我面临着同样的问题。解决方案是迭代数组的每个对象，并根据您的"isVirtual“值构建一个自定义的颜色数组。之后，您可以使用方案输入将您的“颜色数组”传输到您的ngx图表。

编辑:我的错，我提出的解决方案只适用于非堆叠数据……

Answer 2

有一种解决方案，虽然不是最优的，但也是可行的。前提条件是您的系列名称是唯一的。不幸的是，bar组件似乎不能解析每个元素的多个参数，只能解析名称。

模板：

    <ngx-charts-bar-vertical-stacked
                            [results]="results"
                            [customColors]="customColors" ></ngx-charts-bar-vertical-stacked>

打字：

customColors = (name) => {
    // simple example, in your case you have to have nested searching or all series combined in one additional array
    let serie= this.results.find(serie => serie.name == name);

    if (serie.isVirtual) {
      return "#<<hexcode>>";
    } else {
      return "#<<hexcode>>";  
    }
  }