charts 相关问题

我被困在某件事上，如果有人能帮助我，我将非常感激。我正在使用 HTML 和 JQuery 构建一个简单的图表/图形。我有以下代码： <p>我被困在某件事上，如果有人能帮助我，我将非常感激。</p> <p>我正在使用 HTML 和 JQuery 构建一个简单的图表/图形。</p> <p>我有以下代码：</p> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".graph-box .value").each(function() { var num = $(this).html() var iNum = parseInt(num); var eq= $(this).index(); var finalSum = (iNum/1000); alert (finalSum); $(".graph-bar").width (finalSum + "%"); }); }); </script> <style> * {padding:0; margin:0;} .graph-box {border:1px solid #ccc; box-shadow:3px 3px 3px #ccc;} .entry {display:flex;} .name {width:500px; background-color:#ccc;} .graph-bar {box-sizing:border-box; background-color:#ff0000; color:#fff; border-bottom:1px solid #ccc; border:1px solid blue; height:30px;} </style> <body> <div class="graph-box"> <div class="entry"> <div class="name">England</div> <div class="value">817</div> <div class="graph"><div class="graph-bar color-1"></div></div> </div> <div class="entry"> <div class="name">Scotland</div> <div class="value">500</div> <div class="graph"><div class="graph-bar color-1"></div></div> </div> <div class="entry"> <div class="name">Wales</div> <div class="value">250</div> <div class="graph"><div class="graph-bar color-1"></div></div> </div> </div> </code></pre> <p>您可能会看到，JQuery 检查 .value div 并记录内容。然后将其转换为整数。我知道这部分是正确的，并且在我输入警报时可以正常工作。运行时，它会给出 3 个正确的值。然后它应该做的是找到名为“graph-bar”的 div 并根据它创建的整数设置该 div 的宽度。但是，当我运行代码时，所有条形都显示相同的宽度。</p> <p>当所有整数都在一个 div 中时，我已经让这段代码运行良好，所以我怀疑这与“eq”代码有关？如果有人可以让我知道如何解决这个问题，以及最重要的原因，我可以知道未来并再次避免这个问题。</p> <p>感谢有人能给我的任何帮助！</p> </question> <answer tick="false" vote="0"> <p>您的解决方案中缺少两件事：</p> <ol> <li>您需要指定 <pre><code>.graph</code></pre> 类的宽度 <pre><code>.graph {width: 100%;} </code></pre> </li> <li>您应该只更新<strong></strong>当前父节点的<pre><code>.graph</code></pre>： <pre><code>$(document).ready(function() { $(".graph-box .value").each(function(i, elem) { var num = $(this).html() var iNum = parseInt(num); var eq= $(this).index(); var finalSum = (iNum/1000) * 100; // alert (finalSum); $(elem).parent().find(".graph-bar").css("width", finalSum + "%"); }); }); </code></pre> </li> </ol> </answer> </body></html>

html jquery graph charts

回答 0 投票 0

highcharts，json数据：行和列

可能是非常基本的问题：我正在使用两个系列的 highcharts，一个用行表示，另一个用列表示，数据使用 json 加载，问题在于如何告诉 highcharts 一个...

php charts highcharts

回答 1 投票 0

如何构建具有多个数据系列的图表

我需要构建一个包含多个数据系列的图表，以根据特定元素（例如，P3、M1、M2 和 MC）比较每种动物的结果（例如，“老马”与“新马”）。 .

r excel charts

回答 1 投票 0

如何将legedn文本图表更改为自定义文本阿拉伯语？

我从事水晶报告工作，我面临问题，无法将文本图例更改为阿拉伯文本那么如何解决这个问题呢？所以颜色旁边的图例文本我需要更改为自定义文本阿拉伯语。正是我做的...