【问题标题】:Graph not rendering correct scale with NVD3图形未使用 NVD3 呈现正确的比例
【发布时间】:2014-01-23 21:35:11
【问题描述】:

我无法以正确的比例渲染折线图,并且 nvd3 的文档实际上不存在。如果我只使用第一组值(使用成功键),它会呈现正常。

我在这里有一个示例演示:http://jsfiddle.net/LBqk3/1/

以及代码/附加示例数据:

nv.addGraph(function () {
    var chart = nv.models.lineChart();

    chart.xAxis.axisLabel('Requests')
        .tickFormat(function (d) {
        return d3.time.format('%d %b')(new Date(d));
    });

    var y = d3.scale.linear()
        .range([400, 400]);

    chart.yAxis.axisLabel('Amount')
        .scale(y)
        .tickFormat(d3.format('.2f'));

    d3.select('#chart svg')
        .datum([{
        "values": [{
            "x": 1387893600000,
            "y": "170"
        }, {
            "x": 1387980000000,
            "y": "416"
        }, {
            "x": 1388066400000,
            "y": "743"
        }, {
            "x": 1388152800000,
            "y": "633"
        }, {
            "x": 1388239200000,
            "y": "500"
        }, {
            "x": 1388325600000,
            "y": "604"
        }, {
            "x": 1388412000000,
            "y": "683"
        }, {
            "x": 1388498400000,
            "y": "485"
        }, {
            "x": 1388584800000,
            "y": "509"
        }, {
            "x": 1388671200000,
            "y": "677"
        }, {
            "x": 1388757600000,
            "y": "610"
        }, {
            "x": 1388844000000,
            "y": "607"
        }, {
            "x": 1388930400000,
            "y": "538"
        }, {
            "x": 1389016800000,
            "y": "596"
        }, {
            "x": 1389103200000,
            "y": "609"
        }, {
            "x": 1389189600000,
            "y": "581"
        }, {
            "x": 1389276000000,
            "y": "503"
        }, {
            "x": 1389362400000,
            "y": "524"
        }, {
            "x": 1389448800000,
            "y": "515"
        }, {
            "x": 1389535200000,
            "y": "580"
        }, {
            "x": 1389621600000,
            "y": "592"
        }, {
            "x": 1389708000000,
            "y": "573"
        }, {
            "x": 1389794400000,
            "y": "597"
        }, {
            "x": 1389880800000,
            "y": "717"
        }, {
            "x": 1389967200000,
            "y": "2760"
        }],
        "key": "Missed"
    }])
        .transition()
        .duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

【问题讨论】:

  • 看起来你的 y 值是字符串而不是数字。这是你的意图吗?
  • 你是对的,我刚刚发现这是问题所在,现在已经解决了。一开始甚至没有在我的数据集中意识到这一点
  • 欢迎发布我会接受的答案

标签: javascript graph charts d3.js nvd3.js


【解决方案1】:

问题在于您的 y 值是字符串,并且您将它们视为数字。更换

"y": "604"

"y": 604

所有值的等等应该可以解决问题。

【讨论】:

    猜你喜欢
    • 2018-12-04
    • 2014-03-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-06
    • 2016-05-09
    • 2015-10-04
    相关资源
    最近更新 更多