我正在尝试创建我的第一个d3.js条形图,但以下代码返回错误 Error: attribute height: Expected length, "NaN" . 我从一个模板中取这个例子,只替换json数据和x.domain和y.domain以满足我的需要 .
要提供的json数据如下
d:{[
{
"BalanceDate":"2018-02-02T00:00:00",
"IdAdvisor":191,
"Balance":16753281
},
{
"BalanceDate":"2018-02-01T00:00:00",
"IdAdvisor":191,
"Balance":16753207
},
{
"BalanceDate":"2018-01-31T00:00:00",
"IdAdvisor":191,
"Balance":16753120
},
{
"BalanceDate":"2018-01-30T00:00:00",
"IdAdvisor":191,
"Balance":16753065
},
{
"BalanceDate":"2018-01-29T00:00:00",
"IdAdvisor":191,
"Balance":16753503
}
]}
这是应该创建图表的功能
function fillAssetChart() {
var parseDate = d3.time.format("%Y-%m-%d").parse;
$.ajax({
url: "xyz.asmx/getb",
data: "",
dataType: "json",
async:false,
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var jsonData = jQuery.parseJSON(data.d);
$.each(jsonData,
function (i, item) {
bardata.push({ bdate: parseDate(item.BalanceDate.substring(0, 10)), bvalue: item.Balance });
});
},
error: function (jo, txt, errmsg) {
var msg = getResource('generic_ajax_error');
showNotify(msg, 'danger', 'Server Error', 'icon-warning');
msg += " " + txt + " " + errmsg + ' ' + formatJqXhrMsg(jo);
sendJsError(null, msg);
return false;
}
});
var d3Container = d3.select("#total-assets"), width = d3Container.node().getBoundingClientRect().width;
var x = d3.scale.ordinal().rangeBands([0, width], .05);
var y = d3.scale.linear().range([40, 0]);
x.domain(bardata.map(function (d) {
return d.bdate;
}));
y.domain([0, d3.max(bardata, function (d) {
return d.bvalue;
})]);
var container = d3Container.append('svg');
var svg = container
.attr('width', width)
.attr('height', 40)
.append('g');
var bars = svg.selectAll('rect')
.data(bardata)
.enter()
.append('rect')
.attr('class', 'd3-random-bars')
.attr('width', x.rangeBand())
.attr('x',
function (d, i) {
return x(i);
})
.style('fill', "#EC407A");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0]);
bars.call(tip)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
tip.html(function (d, i) {
return "<div class='text-center'>" +
"<h6 class='no-margin'>" +
d +
"</h6>" +
"<span class='text-size-small'>EUR</span>" +
"<div class='text-size-small'>" +
i +
"</div>" +
"</div>";
});
withAnimation();
function withAnimation() {
bars
.attr('height', 0)
.attr('y', 40)
.transition()
.attr('height', function (d) {
return y(d);
})
.attr('y', function (d) {
return 40 - y(d);
})
.delay(function (d, i) {
return i * 50;
})
.duration(1200)
.ease('elastic');
}
}
javascriptr控制台中的错误重复了几次 .
任何帮助将非常感激 .
谢谢