アマランス :
私は、SVG要素を使用してグラフを作成しようと、ループのグラフの各バーのための矩形要素を追加しています。
どのように私は矩形要素のwidth属性を調整するために.append声明に「moveBar」変数を渡すのですか?
$(document).ready(function () {
var ulEmployees = $('#ulEmployees');
var moveBar = 0;
$('#btn').click(function () {
$.ajax('api/AnnualPowerInterruptions', {
dataType: 'json',
success: function (data) {
ulEmployees.empty();
$('#graphData2').append("<svg id=mySVG class='chart' width='500' height='500'></div>");
$.each(data, function (index, val) {
var name = val.year;
ulEmployees.append('<li>' + name + '</li>');
$('#mySVG').append("<g transform='translate (100, 0)'><rect width=moveBar 'height='40' style='fill:red'> </rect> <text x='-50' y='30' fill='red'> blue </text></g>");
window.alert(moveBar);
moveBar = moveBar + 50;
});
$("#graphData2").html($("#graphData2").html())
}
});
});
<div id="graphData2">
</div>
Ma'mounオスマン:
あなたは使用することができ、テンプレートリテラルをこのようなあなたのRECTタグに変数の値を割り当てるには:
$(document).ready(function() {
var ulEmployees = $("#ulEmployees");
var moveBar = 0;
$("#btn").click(function() {
$.ajax("api/AnnualPowerInterruptions", {
dataType: "json",
success: function(data) {
ulEmployees.empty();
$("#graphData2").append(
"<svg id=mySVG class='chart' width='500' height='500'></div>"
);
$.each(data, function(index, val) {
var name = val.year;
ulEmployees.append("<li>" + name + "</li>");
$("#mySVG").append(
`<g transform='translate (100, 0)'><rect width=${moveBar} 'height='40' style='fill:red'> </rect> <text x='-50' y='30' fill='red'> blue </text></g>`
);
window.alert(moveBar);
moveBar = moveBar + 50;
});
$("#graphData2").html($("#graphData2").html());
}
});
});
});
<div id="graphData2">
</div>