Question

window.onload = function() {


    var par = null ;
    var recieved = null;
    var Time = [1,2,3];
    //var Time = ['1:00', '2:00', '2:30'];
    var Sale = [200,150,300];
    var data;
    var ThroughputLine1 = [];

    nv.addGraph(function() {
     var chart = nv.models.lineChart()
            .options({
                transitionDuration: 300,
                useInteractiveGuideline: false
            })


        //.x(function(d) { return d[0] })   //We can modify the data accessor functions...
       // .y(function(d) { return d[1] });   //...in case your data is 

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Time")
            //.tickValues([1,2,3,4,5,6,7,8,9,10])
            .tickFormat(function(d) { return d3.time.format('%x')})
            // .tickFormat(function(d){ d3.format(',.2f')(d)})
            .staggerLabels(true)
        ;

        chart.yAxis
            .axisLabel('Lbs')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                return d3.format(',.1f')(d);
            })
        ;

            data = data();

        d3.select('#chart1').append('svg')
            .datum(data)
            .call(chart);
        nv.utils.windowResize(chart.update);

        return chart;
    });


    function data(){
        var temp;
            for(var i=0; i < Time.length;i++){
                    var time = Time[i];
                    var sale = Sale[i];
                    temp={'x':time, 'y':sale};
                    ThroughputLine1.push(temp); 
                }

        //}

        return  [{
                        values: ThroughputLine1,
                        key: "Bagger 1",
                        color: "#2ca02c"
                        }];
    }

}

因此，我需要很多麻烦才能让它按照我需要的方式工作。截至目前，此代码生成一个包含数据的单个图表。但是，只要我从Time数组更改为Time2数组，我就会得到很多错误，例如错误：属性转换的值无效=“翻译（NaN，106.66666666666669）”和 Uncaught TypeError：无法读取null的属性“x”

这里的测试目的是我的html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
    <meta http-equiv="refresh" content="43200">
    <link rel="stylesheet" type="text/css" href="Styles/Design.css">
    <link href="Styles/nv.d3.css" rel="stylesheet" type="text/css">
    <link href="Styles/lineChart.css" rel="stylesheet" type="text/css">
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/testTime.js" type="text/javascript"></script>
    <!--<script src="Scripts/lineChart.js" type="text/javascript"></script> -->
    <script src="scripts/d3.min.js" charset="utf-8"></script>
    <script src="scripts/nv.d3.js"></script>
</head>
    <body class='with-3d-shadow with-transitions'>
    <div id="wrapperTV2"></div>
        <center>
            <div id="through">Throughput lbs/hr</div>
            <div id="chart1"></div><br><br><br><br>
            <div id="downt">Downtime %</div>
            <div id="chart2"></div><br><br><br><br>
            <div id="other">Other</div>
            <div id="chart3"></div>
        </center>
    </body>
</html>

Answer 1

D3不知道如何处理第二个数组中人类可读时间的字符串值（因此NaN）。您可以做一些事情来将时间解析为数字，如下所示：

    function timeStringToSeconds(str){
      var minutesSeconds = str.split(':');
      // the + coerces the string to a number
      return (+minutesSeconds[0])*60 + (+minutesSeconds[1]);
    }

    var temp;
    for(var i=0; i < Time.length;i++){
        var time = timeStringToSeconds(Time[i]);
        var sale = Sale[i];
        temp={'x':time, 'y':sale};
        ThroughputLine1.push(temp); 
    }

请参阅此Plunk以获取实时版本：http://plnkr.co/edit/NodYtY9DiUg7mBPViLnq?p=preview

nv.d3代码时间格式问题

1 个答案: