在HTML中，给折线设置颜色可以通过CSS样式来实现，具体操作如下：
1、在HTML文件中引入一个外部CSS文件，或者在<head>标签内使用<style>标签编写内联样式，这里以引入外部CSS文件为例：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!-折线图代码 --> </body> </html>
2、在CSS文件(styles.css)中，为折线图设置一个类名，如.line-chart,并定义其颜色属性，如stroke，需要设置折线图所在的SVG元素的stroke属性与.line-chart类名保持一致。
/* styles.css */
.line-chart {
stroke: ff0000; /* 设置折线颜色为红色 */
}
svg path {
stroke: inherit; /* 使SVG路径中的折线颜色与其父元素保持一致 */
}
3、在HTML文件中，为折线图添加一个SVG元素，并为其设置类名.line-chart，需要为折线图中的每个数据点设置一个<path>元素，并为其设置类名.data-point,以及一个<circle>元素，用于表示数据点的圆圈，将数据点的坐标值分别赋给这两个元素的d属性。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<svg width="400" height="200">
<path class="line-chart" d="M10 10 H300 V10 Z" /> <!-折线 -->
<g class="data-points">
<path class="data-point" d="M10,10 L190,10 A5,5 0 0,1 200,10" /> <!-数据点1 -->
<circle class="data-point" r="5" cx="185" cy="10" /> <!-数据点1的圆圈 -->
</g>
</svg>
</body>
</html>
至此，我们已经成功地为折线设置了颜色，如果需要调整折线的颜色，只需修改.line-chart类名下的stroke属性即可，将颜色改为蓝色：
.line-chart {
stroke: 0000ff; /* 设置折线颜色为蓝色 */
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/219393.html
微信扫一扫 