我正在尝试将dc.js库用于图表。但是,我发现我的图表没有正确加载。如果我按如下方式编写代码,则不会显示图表或错误消息。但如果我在下面的就绪函数中包含我的脚本(脚本的第一行除外),那么图表的加载效果会很好。
$(document).ready(function (){
d3.json('data/GDX_partial.json', function (data) {
//code goes here......
}
})
有什么想法吗?我省略了库引用和数据,我确信数据不是问题。
<script type="text/javascript">
observerPieChart = dc.pieChart("#observer-pie-chart");
d3.json('data/GDX_partial.json', function (data) {
var dateFormat = d3.time.format('%m/%d/%Y %I:%M:%S %p').parse;
var numberFormat = d3.format('.2f');
var features = data.features;
features.forEach(function (d) {
d.date = dateFormat(d.attributes.ADD_DATE);
d.newX = Math.round(d.geometry.x);
d.newY = Math.round(d.geometry.y);
});
var gdx = crossfilter(features);
var observerDim = gdx.dimension(function (d) {
return d.attributes.OBSERVER;
});
var obsvCount = observerDim.group().reduce(
function (p, v) {
return p + 1;
},
function (p, v) {
return p - 1;
},
function (p, v) {
return 0;
});
observerPieChart
.width(400)
.height(150)
.dimension(observerDim)
.group(obsvCount);
dc.renderAll();
});
</script>
</head>
<body>
<div class="container-fluid">
<div id="observer-pie-chart"></div>
</div>
</body>