Пользовательский цвет для конкретной серии с использованием 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
}]
}]

Я не уверен, что понимаю вопрос. Не могли бы вы более подробно описать свой вариант использования?

Marjan 08.08.2018 18:13

@Marjan В этом случае мне нужно это для случая 2 серия, когда isVirtual - это true, тогда покажите другой цвет.

Frank Corona 08.08.2018 21:01

Ваша серия (строки) в данном случае - это даты. Серия 1, Серия, 2 и т. д. - это просто точки на этих линиях, и вы не можете изменить цвет одной точки.

Marjan 09.08.2018 13:06

@Marjan Невозможно из-за неработоспособности оболочки или из-за того, что D3 не позволяет этого?

Frank Corona 09.08.2018 15:17
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
4
2 017
2

Ответы 2

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

Обновлено: мое плохое, решение, которое я предлагаю, работает только для данных без накопления ...

Добро пожаловать в Stack Overflow и спасибо, что поделились своим ответом с сообществом. Не могли бы вы привести небольшой пример кода, чтобы было еще яснее, что вы имеете в виду?

Marc Sances 24.08.2020 16:11

Было бы неплохо, если бы вы могли привести пример. Спасибо за ответ

Frank Corona 25.08.2020 23:58

Одно решение, не оптимальное, но работающее. Обязательным условием является уникальность названий ваших серий. К сожалению, компонент панели, похоже, не анализирует несколько параметров каждого элемента, только имя.

Шаблон:

    <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>>";  
    }
  } 

Другие вопросы по теме