Question

我对javascript很新（比如98.9％），如果这是一个愚蠢的问题，请提前道歉......

我目前有一个书名列表，我试图在列表中的每个项目符号项旁边放一个小图。因此，为了生成图形，我使用flot，并将其设置为水平使用堆积条形图。

现在我的列表可能是2，可能是20项。这一切都取决于登录的用户。

我遇到的挑战是，flot似乎是基于必须为图形设置一个专门识别的HTML占位符，然后生成图形的javascript（在我的情况下是外部文件），将结果放在一起图形到指定的占位符。

如果我有多个项目，我需要在View中动态创建更多唯一，然后在javascript中。

我大概可以写我的嵌入我的javascript在视图中，并使用一些PHP创建ID的做到这一点，但不知何故不健全的权利 - 我宁愿尽量保持低调的JavaScript，查看整齐的分离 - ，模型，CSS等。

请指点......？

（这是PHP，CodeIgniter，JavaScript和CSS3）

[编辑：代码示例]

以下不是正常工作的代码 - 它是“实验中期”

这是我的JavaScript（在单独的myJS.js文件中）

function plotWithOptions(t,a,p) {

$(function () {
    var d1 = [[t,10]];
    var d2 = [[a,10]];
    var d3 = [[p,10]];

    $.plot($("#placeholder"), [ d1, d2, d3 ], {
        series: {
            stack: 0,
            fill: true,
            linewidth: 1,
            bars: { show: true, barWidth: 10, horizontal: true}
        },
        xaxis: {max: 100, show:false},
        yaxis: {max: 100, show:false},
        grid: {show: false}
    });
});
}

这是我的视图（CodeIgniter）

<script src="/assets/myJS.js"></script>
<script src="/assets/jquery.js"></script>
<script src="/assets/jquery.flot.js"></script>
<script src="/assets/jquery.flot.stack.js"></script>    

<p>This book is rated....
<div id="placeholder1" style="width:300px;height:100px;"></div>
<script>    plotWithOptions(28,14,11); </script>

<p>This book is rated....
<div id="placeholder2" style="width:300px;height:100px;"></div>
<script>    plotWithOptions(28,27,1); </script>

<p>This book is rated....    
<div id="placeholder3" style="width:300px;height:100px;"></div>
<script>    plotWithOptions(28,27,26); </script>

<p>This book is rated....
<div id="placeholder4" style="width:300px;height:100px;"></div>
<script>    plotWithOptions(28,14,11); </script>

Answer 1

我设法找到了解决方案。我不确定是否有更“正确”的方式，但找到“更纯粹/更优雅的答案”的成本效益现在已经超出了我的范围。

这是JavaScript文件myGraphs.js

function plotWithOptions(n,t,a,p) {

$(function () {
    var d1 = [[t,10]];
    var d2 = [[a,10]];
    var d3 = [[p,10]];

    var divReference = "#placeholder"+n

    $.plot($(divReference), [ d1, d2, d3 ], {
        series: {
            stack: 0,
            fill: true,
            linewidth: 1,
            bars: { show: true, barWidth: 10, horizontal: true}
        },
        xaxis: {max: 100, show:false},
        yaxis: {max: 100, show:false},
        grid: {show: false}
    });
});
}

这是我的CodeIgniter视图

<script src="/assets/myGraphs.js"></script>
<script src="/assets/jquery.js"></script>
<script src="/assets/jquery.flot.js"></script>
<script src="/assets/jquery.flot.stack.js"></script>    



<div id="Whatever">
    <ul>
        <?php
        for ($i=1; $i<=5; $i++) {
            echo "\n".'<li>';
            echo "\n".'<div id="placeholder'.$i.'" style="width:300px;height:20px;"></div>';
            echo "\n".'<script>plotWithOptions('.$i.',28,14,11); </script>';
            echo "\n".'</li>';
        }
        ?>
    </ul>
</div>

在View AND JavaScript中动态创建<div id's =“”>？</div>

1 个答案: