Пользовательский цвет для конкретной серии с использованием ngx-charts

Я использую оболочку Angular для ngx-диаграмм D3.js, у меня представлен вертикальный столбчатый график, но мне нужно, чтобы цвет серии был индивидуальным, когда серия имеет определенное значение. Вот пример того, как формируются мои результаты.

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

angular ngx-charts
person Frank Corona    schedule 08.08.2018    source источник
comment
Я не уверен, что понимаю вопрос. Не могли бы вы более подробно описать свой вариант использования?   -  person Marjan    schedule 08.08.2018
comment
@Marjan В этом случае мне нужно это для случая Серии 2, когда isVirtual равно true, тогда покажите другой цвет.   -  person Frank Corona    schedule 08.08.2018
comment
Ваша серия (строки) в данном случае - это даты. Серия 1, Серия, 2 и т. Д. - это просто точки на этих линиях, и вы не можете изменить цвет одной точки.   -  person Marjan    schedule 09.08.2018
comment
@Marjan Невозможно из-за неработоспособности оболочки или из-за того, что D3 этого не позволяет?   -  person Frank Corona    schedule 09.08.2018

Ответы (2)


arrow_upward
0
arrow_downward

У меня такая же проблема. Решение состоит в том, чтобы выполнить итерацию по каждому объекту вашего массива и создать собственный массив цветов в зависимости от вашего значения isVirtual. После этого вы можете передать свой цветовой массив на свои ngx-диаграммы, используя вход [scheme].

РЕДАКТИРОВАТЬ: мой плохой, решение, которое я предлагаю, работает только для данных без накопления ...

person Toine    schedule 24.08.2020
comment
Добро пожаловать в Stack Overflow и спасибо, что поделились своим ответом с сообществом. Не могли бы вы привести небольшой пример кода, чтобы было еще яснее, что вы имеете в виду? - person Marc Sances; 24.08.2020
comment
Было бы неплохо, если бы вы могли привести пример. Спасибо за ответ - person Frank Corona; 26.08.2020

arrow_upward
0
arrow_downward

Одно решение, не оптимальное, но работающее. Обязательным условием является уникальность названий ваших серий. К сожалению, компонент 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>>";  
    }
  }
person Marc    schedule 11.05.2021