代码之家 › 专栏 › 技术社区 › Austin Mackillop

我怎样才能得到一个图表.js在节点/React web应用程序中显示数据的图表?

chart.js socket.io reactjs node.js javascript

Austin Mackillop · 技术社区 · 6 年前

我正在尝试使用图表.js图书馆。

在我的节点.js应用程序,用户上传一个csv文件。这个文件被一个flaskrestapi处理成一个数据帧。数据帧保存在flask服务器上,可以通过get请求进行访问。get请求返回一个JSON对象,其中包含Open、High、Low、Close和Volume字段。这些字段包含数组。

我有一个网络插座(套接字.io)在我的express服务器和react组件之间建立。我的express服务器ping我的flaskapi寻找图表数据。当图表数据可用时(上传文件后),套接字将此数据发送到组件。客户机套接字触发创建图表的组件方法。出现图表,但没有显示数据点。

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

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

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

这是我的应用程序和空图表:

我的问题是,为了让数据显示出来,我在这个实现中缺少了什么?

2 回复 | 直到 6 年前

cdrn 6 年前

我可能错了,但您的折线图的输入数据格式似乎不正确。看 here 标签数组。

当数据数组是一个数字数组时,x轴通常是一个类别。使用点在阵列中的位置将点放置到轴上。使用分类轴创建折线图时,数据对象的labels属性必须必须指定。

here

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

Austin Mackillop 6 年前

它们的实现方式如下:

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
}