Как получить диаграмму chart.js для отображения данных в веб-приложении Node / React?

Question

Я пытаюсь отобразить финансовые данные в веб-приложении с помощью библиотеки Chart.js.

В моем приложении Node.js пользователь загружает CSV-файл. Этот файл преобразуется в фрейм данных pandas с помощью api колбы. Кадр данных сохраняется на сервере фляги и доступен через запрос на получение. Запрос get возвращает объект JSON с полями Open, High, Low, Close и Volume. Эти поля содержат массивы.

У меня установлен веб-сокет (socket.io) между моим экспресс-сервером и компонентом реагирования. Мой экспресс-сервер пингует мой api фляги в поисках данных графика. Когда данные диаграммы доступны (после загрузки файла), сокет отправляет эти данные компоненту. Клиентский сокет вызывает метод компонента, который создает диаграмму. Диаграмма появляется, но без точек данных.

Компонент:

class Canvas extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: false,
            endpoint: 'http://localhost:4000'
        }

        this.establishSocket = this.establishSocket.bind(this);
        this.makeChart = this.makeChart.bind(this);
    }

    componentDidMount() {
        this.establishSocket();
    }

    establishSocket() {
        const { endpoint } = this.state;
        const socket = socketIOClient(endpoint);
        socket.on("ohlcv_data", data => this.makeChart(data.Close));
    }

    makeChart(datapoints) {
        this.setState({ data: datapoints })
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: datapoints,
            options: { 
                responsive: true, 
                maintainAspectRatio: false
            }
        });
        console.log(myChart.data);
    }

    render() {
        return (
            <div id="chartContainer">
                <canvas id="myChart"></canvas>
            </div>
        )
    }
}

Код диаграммы был адаптирован из документации Chart.js здесь:

https://www.chartjs.org/docs/latest/getting-started/usage.html

https://www.chartjs.org/docs/latest/charts/line.html

Это мое приложение с пустым графиком:

Журнал консоли в нижней части функции makeChart отображает ожидаемый массив. Это вывод этого журнала:

У меня вопрос: что мне не хватает в этой реализации, чтобы данные появились?

Answer 1

Спасибо CDM за правильное направление. Я вспомнил, что в одном из моих репозиториев github есть реализации chart.js, сделанные моими товарищами по команде, которые заменили графики Google, которые я использовал изначально.

Они реализованы так:

makeChart(datapoints) {
    this.setState({ data: datapoints })
    var ctx = document.getElementById("myChart");
    var datapoints = datapoints.slice(0,100)
    var config = {
        type: 'line',
        data: {
            labels: this.linspace(0,datapoints[0],datapoints.length),
            datasets: [{
                data: datapoints,
                label: "Price:",
                borderColor: "#3e95cd",
                fill: false
            }]
        },
        options: {
            title: {
                display: true,
                text: 'WTI Closing Price'
            },
            legend: {
                display: false
            }
        }
    }
    var myChart = new Chart(ctx, config );
}

Этот формат конфигурации работает, как и ожидалось, создавая диаграмму ниже:

Для полноты, для тех, кто может использовать этот точный код, функция linspace реализована следующим образом:

precisionRound(number, precision) {
    var factor = Math.pow(10, precision);
    return Math.round(number * factor) / factor;
}

linspace (a, b, n) {
    if (typeof n === 'undefined') n = Math.max(Math.round(b - a) + 1, 1)
    if (n < 2) {
        return n === 1 ? [a] : []
    }
    var i,ret = Array(n)
    n--
    for (i = n;i >= 0;i--) {
        ret[i] = this.precisionRound((i * b + (n - i) * a) / n, 2)
    }
    return ret
}

Answer 2

Я могу ошибаться, но похоже, что входные данные для вашей линейной диаграммы имеют неправильный формат.Посмотрев здесь на документацию chartJs, вы должны либо указать x и y каждой точки отдельно, используя массив объектов, либо, в вашем случае, при передаче массива чисел, указать метки массив.

Когда массив данных представляет собой массив чисел, ось x обычно является категорией.Точки размещаются на оси, используя их положение в массиве.Когда линейная диаграмма создается с осью категории, должно быть указано свойство метки объекта данных .

Вы можете увидеть, как это сделать здесь , поэтому ваш параметр данных диаграммы должен выглядеть следующим образом:

let chart = new Chart(ctx, {
    type: ...
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: ...
    },
});