Я хочу создать таблицу, которая отображает графики.Внутри каждой строки я хочу показать полилинейный график, который отображается на основе данных из ячеек таблицы.Я решил добиться этого, создав график с SVG и установив его в качестве фонового изображения для каждой строки.Я создал SVG, но я не могу понять, как установить его в качестве background-image (написав styles = "background-image: url (...);", если я определю стили CSS внутри класса (и установлю его)к строке таблицы) это работает нормально, но это не то, что я хочу, потому что мне нужны разные графики для каждой строки).
Мой код:
index.component.ts:
let svgBackgrounds = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' class='svg-graph' viewBox='0 0 1400 100'><style type='text/css'>.base-line{ fill: none; stroke: rgb(116, 96, 238); stroke-width: 3px; }.base-body{ fill: rgba(116, 96, 238, .1); }</style><g class='graph'><polyline class='base-line' points='0,50 100,10 200,50 300,70 400,40 500,20 600,60 700,70 800,80 900,20 1000,40 1100,70 1200,10 '></polyline><polyline class='base-body' points='0,100 0,50 100,10 200,50 300,70 400,40 500,20 600,60 700,70 800,80 900,20 1000,40 1100,70 1200,10 1200,100 '></polyline></g></svg>";
index.component.html:
<tr style="height: 40px; position: relative !important;" [ngStyle]="{'background-image': 'url(' + svgBackgrounds + ')'}">
Спасибо за вашу помощь заранее!:)