react chart_带有Chart.js和React的金字塔图

最新推荐文章于 2024-08-13 08:03:31 发布

weixin_26750481

最新推荐文章于 2024-08-13 08:03:31 发布

阅读量493

点赞数

原文链接：https://medium.com/wesionary-team/pyramid-chart-with-chart-js-and-react-16a1916d5221

版权

这篇博客介绍了如何在React应用中结合Chart.js库来实现一个动态的金字塔图表，详细阐述了步骤和关键代码片段。

摘要由CSDN通过智能技术生成

react chart

Chart.JS is a popular java script charting library. Various kinds of Charts can be built with it but when I was searching for building Pyramid Chart (Stacked Bar Chart), I couldn’t find any tutorials that shows how to build the chart I wanted using chart.js so, this story shows how I built the pyramid chart.

Chart.JS是流行的Java脚本图表库。可以使用它构建各种图表，但是当我搜索构建金字塔形图(堆积条形图)时，找不到任何教程可以显示如何使用chart.js来构建图表。因此，这个故事说明了如何我建立了金字塔图。

TL;DR: Use negative values for one data set and then customize tool tips and x-axis ticks to show positive numbers although they are negative numbers.

TL; DR：对一个数据集使用负值，然后自定义工具提示和x轴刻度以显示正数，尽管它们是负数。

Image for post — Final Pyramid Chart built using chart.js

In this story, I will be using ReactJS and ChartJS to build a pyramid chart. Before we begin let us add chart js dependency by doing yarn add chart.js and If you are using typescript in your project you can simple add type definitions for chart.js using yarn add -D @types/chart.js .