n轴在y轴上的图表格式

时间:2015-09-01 14:24:07

标签: javascript jquery json asp.net-mvc nvd3.js

有没有人知道nvd3对y值有什么固有的减少?在JSON.parse之后,数据似乎是正确的,并且x值上的日期是正确的,但是y值的绘制比它们输入的要低得多。示例:4.152的第一个y值变为0,5.557变为0.273,因此它不仅仅是减去第一个y值以在原点开始图表。非常感谢任何见解。

图表代码(在单独的.js文件中):

$(function () {
    // nvd3 charts
    tisa_nvd3_charts.cumulativeLine();
})

// nvd3 charts
tisa_nvd3_charts = {
    cumulativeLine: function () {
        if ($('#nvd3_cumulativeLine').length) {
            nv.addGraph(function () {
                var chart = nv.models.cumulativeLineChart()
                    .useInteractiveGuideline(true)
                    .x(function (d) { return d[0] })
                    .y(function (d) { return d[1] })
                    .color(d3.scale.category20().range())
                    .transitionDuration(500)
                    .clipVoronoi(false);

            chart.xAxis.tickFormat(function (d) {
                return d3.time.format('%m/%d/%y')(new Date(d))
            });

            chart.yAxis.tickFormat(d3.format('$,.3f'));

            d3.select('#nvd3_cumulativeLine svg').datum(cumulativeTestData()).call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
            });
        }
    }
}

视图中的.datum函数:

<script type="text/javascript">
    function cumulativeTestData() {
        var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
        return [
            {
                key: "Closing Prices",
                mean: 60,
                values: closes
            },
        ];
    }
</script>

正确的JSON.parse的HTML:

var closes = JSON.parse('[[1367341200000,4.152],[1369933200000,4.148],[1375203600000,3.459],[1377882000000,3.567], etc.]')

编辑:这是一个工作的plunkr,显示在不正确的y轴点绘制的数据的y值:plnkr.co/edit/enR6tKQmpKWxroVHDVOQ?p=preview

1 个答案:

答案 0 :(得分:0)

回去回答这个问题。解决方案非常愚蠢。将图形从累积折线图更改为常规折线图可正确呈现y值。可以找到可用的nvd3图表示例here