如何通过<li> tag?</li>从javascript函数动态地向我的图表添加值

时间:2014-09-29 14:54:53

标签: javascript html

我在本节中编写了javascript函数来进行一些评估。

的Javascript

function getValue($value ){
    if($value<100) {
        return $value;
    } else if ($value>100 && $value<1000) {
        return ($value/1000*100);
    }else if($value>1000 && $value<10000){
        return ($value/10000*100);
    }else if($value>10000 && $value<100000){
        return ($value/100000*100);
    }
}        

图表从这里得出。当我从li标签调用getValue()函数时,如下所示,它不会绘制值,因为其他条形图被绘制。

<div class="bar-stats">
    <ul class="progress-stat-bar clearfix">
        <li data-percent="getValue(600);" ><span class="progress-stat-percent pink"></span</li>
        <li data-percent="400"><span class="progress-stat-percent"></span></li>
        <li data-percent="700"><span class="progress-stat-percent yellow-b"></span></li>
    </ul>
    <ul class="bar-legend">
        <li><span class="bar-legend-pointer pink"></span> Total Sales</li>
        <li><span class="bar-legend-pointer green"></span> Total Earnings</li>
        <li><span class="bar-legend-pointer yellow-b"></span> Total Profit</li>
    </ul>
    <div class="daily-sales-info">
        <span class="sales-count">700<i class="fa fa-dollar"></i> </span> 
        <span class="sales-label">Total Profit</span>
    </div>
</div>

3 个答案:

答案 0 :(得分:0)

您应该执行以下操作:

in html:

<li id="li1" >...</li>

在使用jQuery的js文件中的getValue函数之后结束:

$("#li1").css("data-percent" : getValue(600)

对于您想要更改的每个样式变量

答案 1 :(得分:0)

表示html:

<li id="test"></li>

在javascript中:

document.getElementById("test").innerHTML = getvalue(your_value);

答案 2 :(得分:0)

<强> HTML

<li id="listItem1" >...</li>

<强>的Javascript

document.getElementById("listItem1").setAttribute("data-percent", getvalue(your_value));