css 如何实现一个线图 |css hover制作导航栏

首先，大家需要准备一个包含数据的数组，例如：

var data = [20, 25, 18, 30, 40, 45];

然后，大家需要确定图表的尺寸和颜色：

.container {
width: 600px;
height: 300px;
border: 1px solid #ccc;
}
.line {
stroke: #007bff;
stroke-width: 2;
fill: none;
}

接着，大家需要创建SVG元素，并在其中绘制直线：

<div class="container">
<svg viewBox="0 0 600 300">
<polyline class="line" points="0,280 100,250 200,270 300,220 400,200 500,150"/>
</svg>
</div>

注意，points属性的值是一个由多组坐标组成的字符串，每组坐标用逗号分隔，第一个坐标表示横坐标，第二个坐标表示纵坐标。

最后，大家可以通过JavaScript来动态生成坐标，从而实现一个更加灵活并且能够适应不同尺寸的线图。

var data = [20, 25, 18, 30, 40, 45];
var container = document.querySelector('.container');
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 ' + container.clientWidth + ' ' + container.clientHeight);
var polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
var points = '';
for (var i = 0; i< data.length; i++) {
var x = i / (data.length - 1) * container.clientWidth;
var y = (1 - data[i] / 50) * container.clientHeight;
points += x + ',' + y + ' ';
}
polyline.setAttribute('class', 'line');
polyline.setAttribute('points', points);
svg.appendChild(polyline);
container.appendChild(svg);

以上就是使用CSS实现一个线图的详细步骤，期望对您有所帮助。