📌  相关文章
📜  如何使用 Material UI 和 DevExpress 创建饼图?

📅  最后修改于: 2022-05-13 01:56:50.595000             🧑  作者: Mango

如何使用 Material UI 和 DevExpress 创建饼图?

DevExpress: DevExpress 是一个用于控制和构建 Window、Mobile 和其他应用程序的用户界面的包。

饼图:饼图是一种圆形统计图形,它被分成多个切片来说明数字比例。它描绘了一个使用“饼图”的特殊图表,其中每个扇区显示数据的相对大小。

创建 React 应用程序和安装模块的步骤:

  • 第 1 步:使用以下命令创建一个 React 应用程序。

    npx create-react-app foldername

  • 第 2 步:创建项目文件夹(即文件夹名称)后,使用以下命令移动到该文件夹。

    cd foldername
  • 第 3 步:创建 ReactJS 应用程序后,使用以下命令安装所需的模块。

    npm i --save @devexpress/dx-react-core @devexpress/dx-react-chart
    npm install @material-ui/core
    npm i --save @devexpress/dx-react-chart-material-ui

项目结构:它将如下所示:

项目结构

示例:现在在 App.js 文件中写下以下代码。在这里,App 是我们编写代码的默认组件。

App.js
import React from "react";
import Paper from '@material-ui/core/Paper';
import {
  Chart,
  PieSeries,
  Title
} from '@devexpress/dx-react-chart-material-ui';
  
  
const App = () => {
  
// Sample data
const data = [
  { argument:'Monday', value:10 },
  { argument:'Tuesday', value:40 },
  { argument:'Wednesday', value:10 },
  { argument:'Thursday', value:20 },
  { argument:'Friday', value:20 },
];
return (
    
    
      
      
    </Chart>
  </Paper>
);
}
  
export default App;</code></pre></div><br><hr></div></div><p>运行应用程序的<strong>步骤:从项目的根目录使用以下命令运行应用</strong>程序: </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">npm start</code></pre></div><p><strong>输出:</strong>现在打开浏览器并转到<i><strong>http://localhost:3000/</strong></i> ,您将看到以下输出: </p><div style="width:810px" class="wp-caption alignnone"><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_create_pie_chart_in_react_using_material_UI_and_DevExpress_?_1.jpg" width="746"><p class="wp-caption-text">输出</p></div><br><div id="GFG_AD_Desktop_InContent_ATF_728x280" style="margin-left:-3.5%;min-height:280px"></div></div></article>

                </div>

            </div>
        </div>
    </div>
</div>


  
<footer>
    <div class="bg-white text-center pb-1">
        <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有
            <br>

            <a href="https://beian.miit.gov.cn/" target="_blank"
                class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a>

            <br>
            Made with ❤️ in Chengdu
        </p>
    </div>
</footer>


  <!-- 引入Bootstrap JavaScript库 -->
  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>

  <!-- 引入Meilisearch搜索相关的JavaScript库 -->
  <script
    src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
  <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>

  <!-- 引入prismjs代码高亮相关的JavaScript库 -->
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

</body>


</html>