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

【问题标题】：Not able to make chart in NVD3. Formatting issue on x/y-axis无法在 NVD3 中制作图表。 x/y 轴上的格式问题
【发布时间】：2018-05-05 04:57:08
【问题描述】：

我正在使用 nvd3.js 制作 OHLC 图表。我有来自 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;
        });
});

【问题讨论】：

为了让您的小提琴正常工作，只需删除 D3 v5 参考：jsfiddle.net/9cw68mmz 回到您的问题，这段代码有什么问题？ “数据未在图表上正确显示”是什么意思？
@GerardoFurtado 是的，我删除了它，主要问题是 x 轴和 y 轴上的数据标签，提供的数据没有意义
@GerardoFurtado 我的数据集的 y 轴值约为 50。但在图片中你可以看到它在正端的负数和非常高的数字
NVD3 具有开箱即用的 OHLC，这是真的。我正在用图表做其他事情，这只是一个开始。我知道我正在做一些非常小的愚蠢的事情。没找到就是了
我需要检查一下我不知道这两个的区别，但我的 x 轴还是没用，日期不正确。

标签： javascript d3.js charts nvd3.js

【解决方案1】：

你有两个问题：

您需要的是折线图，而不是累积折线图。因此，只需这样做：
```
var chart = nv.models.lineChart()
```
您的时间戳记错了。乘以 1000 得到正确的时间戳：
```
new Date(d*1000)
```

这里是带有这些更改的 JSFiddle：https://jsfiddle.net/m5gef1bw/

【讨论】：

我正要发布相同的答案。无论如何，谢谢男人真的很感激。