从不同日期格式的json文件绘制数据

Question

我使用的是graph1.json文件，它与给出的一样。 createdOn日期存储为日期时间值。该图是绘制的，但是createdOn的值不正确。如何解析绘制图形的日期。

{ 
    "Vitals": [ 
     { 
      "createdOn": "2015-08-01 23:35:15.652", 
      "read": "1", 
      "ews": 3, 
      "vitalVal": 78 
     }, 
     { 
      "createdOn": "2015-08-01 22:35:15.652", 
      "read": "1", 
      "ews": 2, 
      "vitalVal": 82 
     }, 
     { 
      "createdOn": "2015-08-01 21:35:15.652", 
      "read": "1", 
      "ews": 2, 
      "vitalVal": 80 
     }, 
     { 
      "createdOn": "2015-08-01 21:25:15.652", 
      "read": "1", 
      "ews": 4, 
      "vitalVal": 101 
     }, 
     { 
      "createdOn": "2015-08-01 21:15:15.652", 
      "read": "1", 
      "ews": 0, 
      "vitalVal": 100 
     }, 
     { 
      "createdOn": "2015-08-01 21:05:15.652", 
      "read": "1", 
      "ews": 1, 
      "vitalVal": 85 
     }, 
     { 
      "createdOn": "2015-08-01 20:59:15.652", 
      "read": "1", 
      "ews": 0, 
      "vitalVal": 91 
     }, 
     { 
      "createdOn": "2015-07-27 12:58:15.652", 
      "read": "1", 
      "ews": 0, 
      "vitalVal": 96 
     }, 
     { 
      "createdOn": "2015-07-27 12:57:15.652", 
      "read": "1", 
      "ews": 0, 
      "vitalVal": 94 
     } 
    ], 
"unit": "mg" 
} 

我控制器

.controller('ChartCtrl', ['$scope','$http', function ($scope,$http) { 

}]) 
.directive('linearChart', ['$http',function ($http) { 
    return { 
     restrict: 'EA', 

     link: function (scope, elem, attrs) { 
      var req = { 
     method: 'GET', 
     url: 'js/modules/myvitals/graph1.json', 
     headers: { 
     'Content-Type': "application/json" 
     }, 
     data: { 
      "userName":'userName' 
      ,"password":'password' 
      } 
     }; 

     $http(req).then(function(response){ 
      //console.log(response.data); 
     scope.data = response.data.SPO2; 
      var data = scope.data; 

      var margin = { 
       top: 40, 
       right: 20, 
       bottom: 30, 
       left: 50 
      }, 
      width = 365 - margin.left - margin.right, 
      height = 300 - margin.top - margin.bottom; 

      // Parse the date/time 
      var parseDate = d3.time.format("%d-%b-%y").parse; 
      console.log("Date parsed:"+parseDate); 
      // Set the ranges 
      var x = d3.time.scale().range([0, width]); 
      var y = d3.scale.linear().range([height, 0]); 

      // Define the axes 
      var xAxis = d3.svg.axis().scale(x) 
       .orient("bottom").ticks(5).tickFormat(d3.time.format("%d")); 

      var yAxis = d3.svg.axis().scale(y) 
       .orient("left").ticks(5); 

      // Define the line1 
      var valueline1 = d3.svg.line() 
       .x(function (d) { 
       return x(new Date(d.createdOn)); 
       // return x(d.date); 
      }) 
       .y(function (d) { 
       return y(d.vitalVal); 
      }); 


      // Adds the svg canvas 
      var svg = d3.select("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", 
       "translate(" + margin.left + "," + margin.top + ")"); 

      // Scale the range of the data 
      x.domain(d3.extent(data, function (d) { 
       return new Date(d.createdOn); 
      })); 
      y.domain([0, d3.max(data, function (d) { 
       return d.vitalVal; 
      })]); 

      // Add the valueline1 path. 
      svg.append("path") 
       .attr("class", "line") 
       //.attr("id", "valueline1")  //add id to path for hide/show 
       .attr("d", valueline1(data)); 

      //text label for y axis 
      svg.append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 0 - margin.left) 
       .attr("x", 0 - (height/2)) 
       .attr("dy", "1em") 
       .style("text-anchor", "middle") 
       .attr("class", "ylabel") 
       .text("Measurement (bpm)"); 

      // text label for the x axis 
      svg.append("text")  
        .attr("x", width/2) 
        .attr("y", height +30) 
        .style("text-anchor", "middle") 
        .attr("class", "xlabel") 
        .text("Date"); 

      // Add the scatterplot for line1 
      svg.selectAll("dot") 
       .data(data) 
       .enter().append("circle") 
       .attr("r", 4.5) 
       // .attr("class", "valueline1") //add class to each dot 
       .style("fill", function (d) { 
       if (d.ews == 0) return "green"; 
       if (d.ews == 1) return "yellow"; 
       if (d.ews == 2) return "orange"; 
       if (d.ews == 3) return "red"; 
      }) 
       .attr("cx", function (d) { 
        return x(new Date(d.createdOn)); 
       //return x(parseDate(d.createdOn)); 
      }) 
       .attr("cy", function (d) { 
       return y(d.vitalVal); 
      }) .on("mouseover", function() { 
       return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible 
      }) 
       .on("mousemove", function (d) { 
       // console.log() 
       d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 12) + "px").style("left", (d3.mouse(this)[0] + 10) + "px"); 
       d3.select("#mytooltip").select("#txvalue").text(function() { 
        return d.createdOn; //setting the date values to tooltip 
       }); 
       d3.select("#mytooltip").select("#tyvalue").text(function() { 
        return d.vitalVal; //setting the date values to tooltip 
       }); 
       return; 
      }) 
       .on("mouseout", function() { 
       return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip 
      });  


      // Add the X Axis 
      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

      // Add the Y Axis 
      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis); 
// console.log(resposneData); 
     }, function(error){ 
      console.log(error); 

     }); 


     } 
    }; 
}]) 

而且我渲染SVG在HTML文件中

<div ng-controller="ChartCtrl"> 
      <svg linear-chart></svg> 

      <div class="mytool" id="mytooltip"> 
       <div id="tyvalue"></div> 
       <div id="txvalue"></div> 
      </div> 

</div> 

Answer 1

你可以做财产以后这样你刀尖

d3.select("#mytooltip").select("#ttdate").text(function() { 
        var timeFormat = d3.time.format('%I:%M %p');//to show time in 10.00 AM, 12.30 PM 
        return timeFormat(new Date(d.date)); //setting the time values to tooltip 
       }); 
       d3.select("#mytooltip").select("#ttclose").text(function() { 
        return d.close; //setting the date values to tooltip 
       }); 

这是非常好的教程为D3日期格式http://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95

希望这有助于！