Question

我正在为D3.js ngx图表使用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>>";  
    }
  }

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

2 个答案: