如何使用React Highcharts创建环形图?

huangapple go评论199阅读模式
英文:

How to get the doughnut chart using react highcharts?

问题

I tried to achieve this kind of chart.
但是我无法完全得到这个。而是得到了这个。

如何才能获得我想要的确切结果。

这是我尝试使用React Highcharts 做的。有人可以帮我吗?
先感谢了。

英文:

如何使用React Highcharts创建环形图?

I tried to achieve this kind of chart.
But I couldn't get this exactly. Instead of that I got this.如何使用React Highcharts创建环形图?

How can I get that exact thing that I want.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const getOptions = (type) =&gt; ({
  2. chart: {
  3. type:&#39;pie&#39;,
  4. width: 500,
  5. height: 300,
  6. },
  7. title: {
  8. text: _.startCase(`${type} chart`),
  9. },
  10. plotOptions: {
  11. series: {
  12. borderWidth: 0
  13. },
  14. type: &#39;pie&#39;,
  15. size: &#39;100%&#39;,
  16. innerSize: &#39;90%&#39;,
  17. dataLabels:{
  18. distance: &#39;-20px&#39;
  19. }
  20. },
  21. legend: {
  22. enabled: false
  23. },
  24. credits: {
  25. enabled: false
  26. },
  27. yAxis: {
  28. title: {
  29. text: &#39;Values&#39;,
  30. },
  31. },
  32. colors: [&#39;#FCE700&#39;, &#39;#F8C4B4&#39;, &#39;#f6e1ea&#39;, &#39;#B8E8FC&#39;, &#39;#BCE29E&#39;],
  33. series: [
  34. {
  35. data: [{
  36. y: 61.41,
  37. selected: true
  38. },{
  39. y: 20,
  40. selected: true
  41. }
  42. ],
  43. size: &#39;100%&#39;,
  44. innerSize: &#39;80%&#39;,
  45. dataLabels: {
  46. enabled: false,
  47. labelConnector: false,
  48. }
  49. },
  50. ],
  51. });
  52. function App() {
  53. return (
  54. &lt;div&gt;
  55. &lt;HighchartsReact highcharts={Highcharts} options={getOptions(&#39;pie&#39;)} /&gt;
  56. &lt;/div&gt;
  57. );
  58. }

<!-- end snippet -->

This is what I tried using react highcharts. Can anyone please help me with this.!
Thanks in advance.

答案1

得分: 0

以下是您想要实现的图表的简化示例:

  1. let data = 81;
  2. Highcharts.chart(container, {
  3. colors: ['#F2BD27', '#222222'],
  4. title: {
  5. text: data + '%',
  6. verticalAlign: 'middle'
  7. },
  8. plotOptions: {
  9. pie: {
  10. dataLabels: {
  11. enabled: false
  12. },
  13. borderWidth: 0
  14. }
  15. },
  16. series: [{
  17. type: 'pie',
  18. innerSize: '95%',
  19. data: [data, 100 - data]
  20. }]
  21. });

演示链接:
https://codesandbox.io/s/highcharts-react-demo-forked-yr9zgf

英文:

Here is a simplified example of the chart you want to achieve:

  1. let data = 81;
  2. Highcharts.chart(container, {
  3. colors: [&#39;#F2BD27&#39;, &#39;#222222&#39;],
  4. title: {
  5. text: data + &#39;%&#39;,
  6. verticalAlign: &#39;middle&#39;
  7. },
  8. plotOptions: {
  9. pie: {
  10. dataLabels: {
  11. enabled: false
  12. },
  13. borderWidth: 0
  14. }
  15. },
  16. series: [{
  17. type: &#39;pie&#39;,
  18. innerSize: &#39;95%&#39;,
  19. data: [data, 100 - data]
  20. }]
  21. });

Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-yr9zgf

huangapple
  • 本文由 发表于 2023年7月20日 13:16:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76726863.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定