Изменить стиль по умолчанию для горизонтальных полос в ngx-диаграммах

Question

Я использую ngx-чарты [Ссылка на Github Repo] для целей построения графиков в Angular. Я использую версию 8.x Angular. Этот пакет действительно прост в использовании и имеет хорошие функции. Но я не могу изменить стиль по умолчанию для горизонтальных полос на горизонтальной гистограмме. Здесь я прилагаю демонстрацию стекаблица, которую я попробовал. Мне нужна красная граница внизу всех горизонтальных столбцов, а также метки данных оси Y над столбцами.

Stackblitz Демонстрация ngx-диаграммы

Проблема в том, что сгенерированные столбцы имеют формат SVG. Так что становится немного сложнее.

Answer 1

ngx-chart использует svgs, поэтому вы можете редактировать их через css:

::ng-deep .ngx-charts .bar {
  stroke: red;
}

Демонстрация Stackblitz

Answer 2

Я не уверен, что это поможет вам или нет, но, на мой взгляд, это один из способов достижения вашей цели.

есть свойство stroke-dasharray SVG для инсульта.

для border-bottom Я нашел решение, которое я описал ниже:

::ng-deep .ngx-charts .bar {
    stroke: red;
    stroke-dasharray: 0,X,Y,0;
}

, где Y - это значение Width вашего бара, а X - значение * 1014. * сумма из Высота и ширина вашего бара.

Я делюсь демонстрацией свойства штриха SVG, это не Демонстрация диаграммы ngx, но, на мой взгляд, она поможет вам, если вы сможете получить высоту и ширину элемента диаграммы.

https://codepen.io/coderman-401/pen/dyoNgKg

Answer 3

Для этой цели не предусмотрен дескриптор, но вы всегда можете настроить svg следующим образом, чтобы получить желаемые изменения:

let svgList = <HTMLScriptElement[]><any>document.getElementById(your_parent_Div_id).getElementsByTagName('path');

for (let svg of svgList) {
    event.target.style.stroke = 'black';
    event.target.style.strokeWidth = '4';
}