Question

构建包含多个图形的页面，我决定使用NVD3。

问题是NVD3无法找到最大值，导致一些无用的图形。

function renderGraph(parent, data) {
    function getGraph(svgElement, data) {
        var height = 500;

        var chart = nv.models.lineChart()
        chart.options({
            noData: "Not enough data to graph",
            transitionDuration: 500,
            showLegend: true,
            showXAxis: true,
            showYAxis: true,
            rightAlignYAxis: false
        });

        chart.xAxis     //Chart x-axis settings
            .axisLabel(data['x-label'])
            .tickFormat(function(d) {
                return d3.time.format('%d.%m.%Y')(new Date(+d))
            });

        chart.yAxis     //Chart y-axis settings
            .axisLabel(data['y-label'])
            .tickFormat(d3.format('.02f'))
        ;

        svgElement    //Select the <svg> element you want to render the chart in.
            .datum(data['data'])         //Populate the <svg> element with chart data...
            .call(chart);          //Finally, render the chart!

        //Update the chart when window resizes.
        nv.utils.windowResize(function() { chart.update() });
        return chart;
    }
    var svgELement = d3.select('svg#chart_'+data['code']);
    nv.addGraph(getGraph(svgELement, data));
}

如果有帮助，我也会使用twitter bootstrap进行布局。

修改

跟随小提琴应该更有用，因为它包含更少的垃圾 http://jsfiddle.net/Bh578/

第一个和第二个图形显示问题，而第三个图形根据我的期望呈现（即你可以看到整行）

我还添加了useInteractiveGuideline：true选项，因此更明显的是，我希望在图表上看到可见图形区域之外的值。

Answer 1

值应该是整数，而不是JSON解码的字符串整数，然后它就像魅力一样。

NVD3.js折线图无法将y轴缩放为最大值和最小值

1 个答案: