饼图中ApexCharts label的大小、字体和position怎么改

Question

我正在使用 ApexCharts.js 在我的页面上添加饼图组件。 我需要将 label 大小、字体和 position 更改为底部。

 <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <body> <div id="pieChart"></div> <script> var options = { series: [10, 20, 30, 50], chart: { height: 480, type: 'pie', }, labels: ["series_1", "series_2", "series_3", "series_4"], colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"], responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, legend: { position: 'bottom' } } }] }; var chart = new ApexCharts(document.querySelector("#pieChart"), options); chart.render(); </script> </body>

最后，我希望我的图表看起来像这样

你知道如何修改代码以获得与图片上相同的结果吗？

Answer 1

我在底部添加了你的标签。
您可以通过修改以下内容来编辑间距：

itemMargin: {
  horizontal: 5,
  vertical: 0
},

文档可以在这里找到： https://apexcharts.com/docs/options/legend/

 <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <body> <div id="pieChart"></div> <script> var options = { series: [10, 20, 30, 50], chart: { height: 480, type: 'pie', }, labels: ["series_1", "series_2", "series_3", "series_4"], colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"], legend: { show: true, showForSingleSeries: false, showForNullSeries: true, showForZeroSeries: true, position: 'bottom', horizontalAlign: 'center', fontSize: '18px', fontFamily: 'Helvetica, Arial', fontWeight: 400, itemMargin: { horizontal: 15, vertical: 0 }, }, responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, } }] }; var chart = new ApexCharts(document.querySelector("#pieChart"), options); chart.render(); </script> </body>

Answer 2

标签的显示实际上称为“图例”，所有可能的选项都记录在此页面上。

在你的情况下，“传说”嵌套太深，它需要在第一层。 要更改字体大小和字体粗细，您需要添加相应的选项“fontSize”和“fontWeight”。

这是一个工作示例：

 <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <body> <div id="pieChart"></div> <script> var options = { series: [10, 20, 30, 50], chart: { height: 480, type: 'pie', }, labels: ["series_1", "series_2", "series_3", "series_4"], legend: { position: 'bottom', fontSize: '24px', fontWeight: 600, }, colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"], responsive: [{ breakpoint: 480, options: { chart: { width: 200 }, } }] }; var chart = new ApexCharts(document.querySelector("#pieChart"), options); chart.render(); </script> </body>

饼图中ApexCharts label的大小、字体和position怎么改

问题描述

2 个解决方案

解决方案1
2 已采纳 2023-02-01 09:29:48

解决方案2
1 2023-02-01 09:55:54

饼图中ApexCharts label的大小、字体和position怎么改

问题描述

2 个解决方案

解决方案1 2 已采纳 2023-02-01 09:29:48

解决方案2 1 2023-02-01 09:55:54

解决方案1
2 已采纳 2023-02-01 09:29:48

解决方案2
1 2023-02-01 09:55:54