0

我对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>
4

1 回答 1

0

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

这是 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>
于 2013-10-25T18:27:59.597 回答