在 React 中集成 express js API 以使用 canvasJS 进行数据可视化

Question

我在 node.js 中创建了一个 api，它为我提供了一些 json 数据。我想用这些数据进行可视化。我想出了一个在 React 中使用 canvasjs 进行数据可视化的示例。

class BarChart extends Component {
    addSymbols(e){
        var suffixes = ["", "K", "M", "B"];
        var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0);
        if(order > suffixes.length - 1)
            order = suffixes.length - 1;
        var suffix = suffixes[order];
        return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
    }
    render() {
        const options = {
            animationEnabled: true,
            theme: "light2",
            title:{
                text: "Most Popular Social Networking Sites"
            },
            axisX: {
                title: "Social Network",
                reversed: true,
            },
            axisY: {
                title: "Monthly Active Users",
                labelFormatter: this.addSymbols
            },
            data: [{
                type: "bar",
                dataPoints: [
                    { y:  2200000000, label: "Facebook" },
                    { y:  1800000000, label: "YouTube" },
                    { y:  800000000, label: "Instagram" },
                    { y:  563000000, label: "Qzone" },
                    { y:  376000000, label: "Weibo" },
                    { y:  336000000, label: "Twitter" },
                    { y:  330000000, label: "Reddit" }
                ]
            }]
        }

        return (
        <div>
            <h1>React Bar Chart</h1>
            <CanvasJSChart options = {options} 
                /* onRef={ref => this.chart = ref} */
            />
            {/*You can get reference to the chart instance as shown above using onRef. This allows 
you to access all chart properties and methods*/}
        </div>
        );
    }
}

export default BarChart;

这里所有的数据都是静态的。但我想获取 api 并根据可用数据进行可视化。 P.S.:: 如果有任何建议我除了 CanvasJS 之外的其他东西用于数据可视化，除了 d3。那也太好了。任何帮助或任何文章都会非常有用。

Answer 1

查看CanvasJS React gallery 以获取有关从 JSON 读取数据的渲染图表的演示。