代码之家  ›  专栏  ›  技术社区  ›  Abhishek

无法在NVD3中制作图表。x/y轴上的格式问题

  •  1
  • Abhishek  · 技术社区  · 6 年前

    我正在使用nvd3制作OHLC图表。js。我有来自API的数据集,但问题是数据没有正确显示在图表上。我在轴上操纵数字时出错了。我为同样的东西做了一把小提琴。

    Fiddle

    Github Link

    密码

    $(document).ready(function(){
    var dataSet = '{"status":"success","data":[{"key":"Open","values":[[1512432000,55.65],[1512518400,54.45],[1512604800,53.05],[1512691200,56.4],[1512950400,54.65],[1513036800,55],[1513123200,53.9],[1513209600,56],[1513296000,55.9],[1513555200,56.25]]},{"key":"High","values":[[1512432000,55.65],[1512518400,55],[1512604800,57.95],[1512691200,57],[1512950400,55.5],[1513036800,55.4],[1513123200,58.9],[1513209600,56.5],[1513296000,58.5],[1513555200,57.75]]},{"key":"Low","values":[[1512432000,53.65],[1512518400,53.1],[1512604800,53.05],[1512691200,54.1],[1512950400,54.65],[1513036800,53.7],[1513123200,53],[1513209600,54],[1513296000,55.1],[1513555200,52.5]]},{"key":"Close","values":[[1512432000,54.55],[1512518400,53.6],[1512604800,55.9],[1512691200,54.65],[1512950400,54.9],[1513036800,54.1],[1513123200,55.65],[1513209600,54.45],[1513296000,56.5],[1513555200,55.65]]}]}';
    
     var n = nv.addGraph(function () {
                var chart = nv.models.cumulativeLineChart()
                    .x(function (d) {
                        return d[0]
                    })
                    .y(function (d) {
                        return d[1]
                    })
                    .color(d3.scale.category10().range())
                    .useInteractiveGuideline(true)
                ;
    
                chart.xAxis
                    .tickFormat(function (d) {
                        return d3.time.format('%x')(new Date(d))
                    })
    
                chart.yAxis
                    .tickFormat(d3.format(''));
    
    
    
                d3.select('#chart1 svg')
                    .datum(JSON.parse(dataSet)['data'])
                    .call(chart);
    
    
                return chart;
            });
    });
    

    enter image description here

    1 回复  |  直到 6 年前
        1
  •  1
  •   Gerardo Furtado    6 年前

    您有两个问题:

    1. 您需要的是折线图,而不是累积折线图。因此,只要做:

      var chart = nv.models.lineChart()
      
    2. 您的时间戳错误。要获得正确的时间戳,请乘以1000:

      new Date(d*1000)
      

    下面是包含这些更改的JSFIDLE: https://jsfiddle.net/m5gef1bw/