Question

我正在尝试创建一个ndv3 multiChart，并且在检查HTML源代码时数据似乎正在从Model传递到View，但该图表既不显示x轴也不显示数据，它表示未定义。当使用像this这样的样本数据时，图表会显示，并且我在绘制更简单的图表（如line或mutliBar）时使用了相同的方法。我在multiChart数据上缺少一些格式问题吗？非常感谢提前！

这是Javascript：

<script src="/Content/lib/d3/d3.min.js"></script>
<script src="/Content/lib/novus-nvd3/nv.d3.min.js"></script>
<script>
    var margin = { top: 50, right: 50, bottom: 120, left: 70 };
    var svg = "#nvd3_multiChart svg";

    nv.addGraph(function () {
        var chart = nv.models.multiChart()
            .options({ reduceXTicks: false })
            .margin(margin)
            .color(d3.scale.category10().range())
        ;

        chart.xAxis
            .tickFormat(function (d) {
                return d3.time.format('%m/%d/%y')(new Date(d))
            });

        var nSold = JSON.parse('@Html.Raw(Json.Encode(Model.nSoldObject))');
        var hSold = JSON.parse('@Html.Raw(Json.Encode(Model.hSoldObject))');
        var sSold = JSON.parse('@Html.Raw(Json.Encode(Model.sSoldObject))');
        var wSold = JSON.parse('@Html.Raw(Json.Encode(Model.wSoldObject))');
        var bought = JSON.parse('@Html.Raw(Json.Encode(Model.boughtObject))');

        var seriesData = [{ "key": "NSold", "type": "bar", "yAxis": 1, "values": nSold }, { "key": "HSold", "type": "bar", "yAxis": 1, "values": hSold }, { "key": "SSold", "type": "bar", "yAxis": 1, "values": sSold }, { "key": "WSold", "type": "bar", "yAxis": 1, "values": wSold }, { "key": "Bought", "type": "line", "yAxis": 2, "values": bought }];

        // Get max values for each axis
        var minY1 = 0;
        var minY2 = 0;
        var maxY1 = 0;
        var maxY2 = 0;
        for (var i = 0; i < seriesData.length; i++) {
            var _axis = seriesData[i].yAxis;
            var _values = seriesData[i].values;

            // Walk values and set largest to variables
            for (var j = 0; j < _values.length; j++) {
                // For maxY1
                if (_axis == 1) {
                    if (_values[j].y > maxY1) {
                        maxY1 = _values[j].y;
                    }
                }
                // For maxY2
                if (_axis == 2) {
                    if (_values[j].y > maxY2) {
                        maxY2 = _values[j].y;
                    }
                }
            }
        }

        // Set min, max values of axis
        chart.yDomain1([minY1, maxY1]);
        chart.yDomain2([minY2, maxY2]);

        // Set chart
        d3.select(svg)
            .datum(seriesData)
            .call(chart)
        ;

        // Auto resize chart on window resize
        nv.utils.windowResize(chart.update);

        return chart;
    });
</script>

以下是Chrome控制台显示的数据值显示正确的示例：

var nSold = JSON.parse('[[1448928000000,18],[1451606400000,18],[1454284800000,18],[1456790400000,18]]');

错误发生在d3.min.js的“// Set chart”部分的末尾：

Error: Invalid value for <rect> attribute transform="translate(undefined,0)"

Error: Invalid value for <g> attribute transform="translate(NaN,0)"

multiChart数据读取为undefined

0 个答案: