nvd3图表 - y轴值未正确显示

时间:2018-03-12 11:07:17

标签: javascript nvd3.js

我正在创建一个nvd3图表。



var chart = nv.models.multiBarChart();
d3.select('#chart svg').datum([{
    "key": "A",
    "values": [{
        "x": "SADSA",
        "y": "4.0"
      },
      {
        "x": "FDDG",
        "y": "6.0"
      },
      {
        "x": "FF",
        "y": "4.15"
      }
    ]
  },
  {
    "key": "B",
    "values": [{
        "x": "SADSA",
        "y": "20.0"
      },
      {
        "x": "FDDG",
        "y": "18.0"
      },
      {
        "x": "FF",
        "y": "19.45"
      }
    ]
  }
]).transition().duration(500).call(chart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">

<div id="chart" style="height: 200px;"><svg></svg></div>
&#13;
&#13;
&#13;

我的y轴值最多为20,但它仅显示最多6个(即理想的时间和操作时间y轴值未正确显示)。我的代码中有错误吗?

1 个答案:

答案 0 :(得分:0)

我的数据格式错误,改变了这样的数据格式。

 [
        {
            key:"A",
            values:[
                {
                x:"SADSA",
                y:4.0
                },
                {
                x:"FDDG",
                y:6.0
                }
            ]
        },
        {
            key:"B",
            values:[
                {
                x:"SADSA",
                y:20.0
                },
                {
                x:"FDDG",
                y:18.0
                }
            ]
        }
        ]

得到了预期的结果。