我想创建一个显示图形的表格。在每行内部,我想显示折线图,该图表根据表格单元格中的数据显示。 我决定通过使用SVG创建图形并将其设置为每行的背景图像来实现这一目标。我已经创建了SVG,但我无法弄清楚如何将其设置为background-image(通过编写styles =“background-image:url(...);”,如果我在class中定义css样式(并设置它)到表行)它工作正常,但它不是我想要的,因为我需要每行不同的图形。)
我的代码:
index.component.ts:
EDIT_ITEM(state, payload) {
database.ref(`items/${payload.key}`).set(payload.value)
}
index.component.html:
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>";
提前感谢您的帮助! :)