angular - 使用 ngx-charts 为特定系列自定义颜色

Question

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

[{
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”值构建自定义颜色数组。之后，您可以使用 [scheme] 输入将您的“颜色数组”传输到您的 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>>";  
    }
  }