在 React js 中创建带有 bin 的直方图答案

【问题标题】：create histogram with bins in react js在 React js 中创建带有 bin 的直方图
【发布时间】：2021-08-12 14:18:51
【问题描述】：

如何在 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 中得到的直方图结果。 image of histogram python 那么，如何在 React 中做同样的事情呢？谢谢！！

【问题讨论】：

如果您尝试将 matplotlib 转换为 javascript，请改用 d3.js 或类似的绘图库。它不会“相似”，因为 API 不同

标签： python reactjs histogram

【解决方案1】：

您可以为此使用 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]);

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

【讨论】：