0

我正在使用 NVD3 制作几个图表。我在添加特定图形的 addGraph 函数中放置了一个 console.log。

我想知道我的代码是否有问题？我是否正确使用图书馆？我不知道从哪里开始解决这个问题。

火狐（所有图表都正确显示）

总共 444 添加图在这里被调用

总共 518 添加图在这里被调用

总计 572 添加图在这里被调用

总计 553 添加图在这里被调用

总计 617 添加图在这里被调用

总共 595 添加图在这里被调用

谷歌浏览器

总NaN

总NaN

总NaN

总NaN

总NaN

添加图在这里被称为总共108

总计 138

总计 145

总计 146

代码

调用脚本

<script src="../../../data/novus/lib/d3.v2.js"></script>
<script src="../../../data/novus/nv.d3.js"></script>
<script src="../../../data/novus/src/tooltip.js"></script>
<script src="../../../data/novus/src/models/legend.js"></script>
<script src="../../../data/novus/src/models/axis.js"></script>
<script src="../../../data/novus/src/models/scatter.js"></script>
<script src="../../../data/novus/src/models/line.js"></script>
<script src="../../../data/novus/src/models/multiChart.js"></script>

在循环

<script src="../../../data/novus/nv.d3.js"></script>
<script>
    var impressions = [];
    var clickrate = [];
    var trial_impressions = [];
    var trial_clickrate = [];
    var testdata = [{
        "key" : "Impressions",
        "type" : "line",
        "values" : impressions,
        "yAxis" : 1
    }, {
        "key" : "Clicks",
        "type" : "line",
        "values" : clickrate,
        "yAxis" : 2
    }, {
        "key" : "T Impressions",
        "type" : "line",
        "values" : trial_impressions,
        "yAxis" : 1
    }, {
        "key" : "T Clicks",
        "type" : "line",
        "values" : trial_clickrate,
        "yAxis" : 2
    }].map(function(series) {
        series.values = series.values.map(function(d) {
            return {
                x : d[0],
                y : d[1]
            }
        });
        return series;
    });
    var chart;

    nv.addGraph(function() {
        console.log("Add");
        chart = nv.models.multiChart().margin({
            top : 30,
            right : 60,
            bottom : 50,
            left : 70
        }).x(function(d, i) {
            return i
        }).color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
            if ( typeof (dx) == undefined || d > 1000) {
                dx = new Date(d);
            } else {
                dx = new Date(dx);
            }
            return dx ? d3.time.format('%x')(dx) : '';
        });

        chart.yAxis1.tickFormat(d3.format(',.1f'));
        v

        chart.yAxis2.tickFormat(d3.format(',.4f'));

        d3.select('#chart1<?= $chartID?> svg').datum(testdata).transition().duration(500).call(chart);
        return chart;
    });

</script>

调用图表的 div

<div id='chart1<?= $chartID?>' style="width:1110px;height:300px;font-size:11px;margin-top:5px">
    <svg></svg>
</div>
4

1 回答 1

1

我最好的猜测是对这些数字进行了数学计算。在女巫的情况下，使用函数 parseFloat() 可以将字符串转换为数字，以便正确完成数学计算。

于 2013-06-05T21:01:09.893 回答