Я использую оболочку 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 В этом случае мне нужно это для случая 2 серия, когда isVirtual
- это true
, тогда покажите другой цвет.
Ваша серия (строки) в данном случае - это даты. Серия 1, Серия, 2 и т. д. - это просто точки на этих линиях, и вы не можете изменить цвет одной точки.
@Marjan Невозможно из-за неработоспособности оболочки или из-за того, что D3 не позволяет этого?
У меня такая же проблема. Решение состоит в том, чтобы перебрать каждый объект вашего массива и создать собственный массив цветов в зависимости от вашего значения isVirtual. После этого вы можете передать свой «массив цветов» на свои ngx-диаграммы, используя вход [scheme].
Обновлено: мое плохое, решение, которое я предлагаю, работает только для данных без накопления ...
Добро пожаловать в Stack Overflow и спасибо, что поделились своим ответом с сообществом. Не могли бы вы привести небольшой пример кода, чтобы было еще яснее, что вы имеете в виду?
Было бы неплохо, если бы вы могли привести пример. Спасибо за ответ
Одно решение, не оптимальное, но работающее. Обязательным условием является уникальность названий ваших серий. К сожалению, компонент панели, похоже, не анализирует несколько параметров каждого элемента, только имя.
Шаблон:
<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>>";
}
}
Я не уверен, что понимаю вопрос. Не могли бы вы более подробно описать свой вариант использования?