时间戳

首页 > 解决方案 > 在 react js 中创建带有 bin 的直方图

python - 在 react js 中创建带有 bin 的直方图

问题描述

如何在 React js中创建带有 bin 的直方图，类似于 Python 中的方式。

在 Python 中：

import matplotlib.pyplot as plt
x = [2,5,11,22,66,88]
plt.hist(x, bins =3)
plt.show()

结果是 x 轴的直方图：x 值的 3 个范围（我发送的箱数中的 3 个）。y 轴：每个范围内来自 x 的值的数量。我添加了我在 Python 中得到的直方图结果。 直方图 python 的图像 那么，如何在 React 中做同样的事情呢？谢谢！！

标签： pythonreactjshistogram

解决方案

您可以为此使用 plotly.js 库。

HTML：

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.3.0.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JS：

const x = [2,5,11,22,66,88]

const trace = {
    x: x,
    type: 'histogram',
    xbins: {
        end: 88, 
        size: (88 - 2) / 3, 
        start: 2  }
  };
Plotly.newPlot('myDiv', [trace]);

我已经创建了一个简单的代码笔，请查看那里了解详细信息。在 React 设置中做同样的事情应该没有问题。

推荐阅读