时间戳

首页 > 解决方案 > 如何使用每种颜色类别 HTML/CSS 的空白创建彩色线条？

html - 如何使用每种颜色类别 HTML/CSS 的空白创建彩色线条？

问题描述

目前我正在尝试使用 html/css 创建一个范围图这是我当前的图表： 当前图表 我想让它看起来像这样（在颜色变化之间有空格） 想要创建这样的图表

我使用创建它：这是我最近的 css

.chart-cover
{
    position: relative; 
}
span.chart-cover > span
{

    margin-right: -4px;
    padding: 0;
    width: 104px;
    height: 7px;
    display: inline-block;
    background: #38a4fc;
}
span.chart-cover > span.marker
{

    position: absolute;
    top: 0;
    left: 0px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 6px solid #0a75cc;
    border-radius: 20px;
}
.marker span
{
    margin-top: -26px;
    margin-left: -10px;
    font-size: 14px;
    display: block;
}
span.chart-cover > span.marker-text
{
    width: 100%;
    position: relative;
    top: -8px;
    background: none;
}
.marker-text span
{
    position: absolute;
}
.marker-text > span:first-child
{
    left: 176px;
}

.marker-text > span:nth-child(2)
{
    left: 152px;
}

.marker-text > span:nth-child(3)
{
    left: 267px;
}

span.chart-cover > span:first-child
{
    opacity: 0.2;
}


span.chart-cover > span:nth-child(2)
{
    opacity: 0.4;
}


span.chart-cover > span:nth-child(3)
{
    opacity: 0.6;
}


span.chart-cover > span:nth-child(4)
{
    opacity: 0.8;
}

function drawOutpatientData(response) {
    drawBarChartO(response);
    $('#resultOutpatient').html('');

    // Changed 16 Dec (done)
    // $('#resultOutpatient').append('<h4><div align="center" style="border-bottom: none;font-size:18px;">Duration of Outpatient Sick Leave</div></h4><br/><div id="queryRow1" class="query-table-row"><p></p><p></p><p>Average (Mean)</p><p>Range (Percentile)</p></div>');

    for (var i = 0; i < 3; i++) {
        var percPRPN_OSL = parseFloat(response[i].PRPN_OSL) * 100;
        percPRPN_OSL = roundNumber(percPRPN_OSL, 1).toFixed(1);
        var percAVG_OSL = parseFloat(response[i].AVG_OSL) * 100;
        percAVG_OSL = roundNumber(percAVG_OSL, 1).toFixed(1);
        var percAVG_OSLEMP = parseFloat(response[i].AVG_OSLEMP) * 100;
        percAVG_OSLEMP = roundNumber(percAVG_OSLEMP, 1).toFixed(1);
        var percAVG_OSL_P25 = parseFloat(response[i].AVG_OSL_P25) * 100;
        percAVG_OSL_P25 = roundNumber(percAVG_OSL_P25, 1).toFixed(1);
        var percAVG_OSL_P50 = parseFloat(response[i].AVG_OSL_P50) * 100;
        percAVG_OSL_P50 = roundNumber(percAVG_OSL_P50, 1).toFixed(1);
        var percAVG_OSL_P75 = parseFloat(response[i].AVG_OSL_P75) * 100;
        percAVG_OSL_P75 = roundNumber(percAVG_OSL_P75, 1).toFixed(1);
        var percAVG_OSLEMP_P25 = parseFloat(response[i].AVG_OSLEMP_P25) * 100;
        percAVG_OSLEMP_P25 = roundNumber(percAVG_OSLEMP_P25, 1).toFixed(1);
        var percAVG_OSLEMP_P50 = parseFloat(response[i].AVG_OSLEMP_P50) * 100;
        percAVG_OSLEMP_P50 = roundNumber(percAVG_OSLEMP_P50, 1).toFixed(1);
        var percAVG_OSLEMP_P75 = parseFloat(response[i].AVG_OSLEMP_P75) * 100;
        percAVG_OSLEMP_P75 = roundNumber(percAVG_OSLEMP_P75, 1).toFixed(1);

        //Changed 24 Dec (done)
        $('#resultOutpatient').append('<div id="queryRow1" class="query-table-row"><p class="pHead">' + ML_yaxisTextPos[i].label + '</p><p class="title-row">Average (Mean)</p><p class="title-row">Range (Percentile)</p></div><div id="queryOL' + i + '" class="query-table-row query-table-holol"><div style="border-bottom: none; width: 100%;"><div id="queryRow2" class="query-table-row" ><p class="title-row">Per absentee</p><p class="content-row">' + percAVG_OSL + ' Days</p><p><span class="chart-cover"><span></span><span></span><span></span><span></span><span id="spOLPA' + i + '"class="marker"><span><label id="lblOLPA' + i + '"></label></span></span><span class="marker-text"><span class="title-percent-head">25th<br/><span class="marker-text-percent1">'+ percAVG_OSL_P25 +'<span style="margin-left:2px">Days</span></span></span><span class="title-percent-head2">Median<br><span class="marker-text-percentNo2">'+ percAVG_OSL_P50 +'<span style="margin-left:2px">Days</span></span></span><span class="title-percent-head3">75th<br><span class="marker-text-percentNo3">'+ percAVG_OSL_P75 +'<span style="margin-left:2px">Days</span></span></span></span></span></p></div><div id="queryRow3" class="query-table-row" style="border-bottom: none;"><p class="title-row">Per employee</p><p class="content-row">' + percAVG_OSLEMP + ' days</p><p><span class="chart-cover"><span></span><span></span><span></span><span></span><span id="spOLPE' + i + '"class="marker"><span><label id="lblOLPE' + i + '"></label></span></span><span class="marker-text"><span class="title-percent-head">25th<br><span class="marker-text-percent1">' + percAVG_OSLEMP_P25 + '<span style="margin-left:2px">Days</span></span></span><span class="title-percent-head2">Median<br><span class="marker-text-percentNo2">'+ percAVG_OSLEMP_P50 +'<span style="margin-left:2px">Days</span></span></span>  <span class="title-percent-head3">75th<br><span class="marker-text-percentNo3">'+ percAVG_OSLEMP_P75 +'<span style="margin-left:2px">Days</span></span></span></span></span></p></div></div></div><br/>');
        //...................24 Dec
    }
}
    <h3>Outpatient Sick Leave</h3>
         <div id="HGraph" class="graph">
             <!-- Changed 21 Dec -->
            <div style="width: 720px; height: 350px;" id="barchart-containerO"></div>
            <!-- .........21 Dec -->
        </div>
        <div id="resultOutpatient"></div><br />

图表部分是图表封面，标记是图表上的圆形项目符号。那么，我需要更改哪些部分？

标签： htmlcss

解决方案

div{
width:100%;
}
span {
    width: 100px;
    display: inline-block;
    height: 5px;
    background: red;
    position: relative;
    margin: 0px -1px;
}

span:first-of-type{
    opacity: .3;
}

span:nth-of-type(2){
opacity: .5;
}

span:nth-of-type(3){
opacity: .8;
}
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

推荐阅读