Не в состоянии сделать график в NVD3. Проблема форматирования по оси X / Y

1

Я делаю диаграмму OHLC, используя nvd3.js. У меня есть набор данных из API, но проблема заключается в том, что данные не отображаются правильно на диаграмме. Я делаю что-то неправильно, манипулируя числом по оси. Я создал скрипку для того же самого.

скрипка

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;
        });
});

Изображение 174551

  • 0
    Чтобы ваша скрипка заработала, просто удалите ссылку на D3 v5: jsfiddle.net/9cw68mmz Возвращаясь к вашему вопросу, в чем проблема с этим кодом? Что вы подразумеваете под "данные не отображаются должным образом на графике" ?
  • 0
    @GerardoFurtado да, я убрал это, главная проблема - метка данных на оси X и Y, это не имеет смысла с предоставленными данными
Показать ещё 3 комментария
Теги:
d3.js
charts
nvd3.js

1 ответ

1
Лучший ответ

У вас есть два вопроса:

  1. Вам нужна линейная диаграмма, а не кумулятивная линейная диаграмма. Поэтому просто выполните:

    var chart = nv.models.lineChart()
    
  2. Ваша временная метка неверна. Чтобы получить правильную метку времени умножить на 1000:

    new Date(d*1000)
    

Вот JSFiddle с этими изменениями: https://jsfiddle.net/m5gef1bw/

  • 0
    Я собирался опубликовать тот же ответ. В любом случае, спасибо, мужчина действительно ценит это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню