highcharts 在reactjs中添加highchart组织

1tuwyuhd  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(228)

我在reactjs/nextjs中有一个关于highcharts组织的问题。我安装了highcharts-react-official和highcharts的npm包,并将其导入到我的组件中,但它仍然给我一个错误,即组织是一个缺失的模块。
错误如下:

  1. Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=organization
  2. - missingModuleFor: organization

这是我尝试过的。

  1. import { useState } from "react";
  2. import Highcharts from "highcharts";
  3. import HighchartsReact from "highcharts-react-official";
  4. const HighChartsRender = () => {
  5. const options = {
  6. title: {
  7. text: "My chart",
  8. },
  9. accessibility: {
  10. point: {
  11. descriptionFormatter: function (point) {
  12. var nodeName = point.toNode.name,
  13. nodeId = point.toNode.id,
  14. nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
  15. parentDesc = point.fromNode.id;
  16. return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
  17. }
  18. }
  19. },
  20. series: [{
  21. type: 'organization',
  22. name: 'Highsoft',
  23. keys: ['from', 'to'],
  24. data: [
  25. ['Shareholders', 'Board'],
  26. ['Board', 'CEO'],
  27. ['CEO', 'CTO'],
  28. ['CEO', 'CPO'],
  29. ['CEO', 'CSO'],
  30. ['CEO', 'HR'],
  31. ['CTO', 'Product'],
  32. ['CTO', 'Web'],
  33. ['CSO', 'Sales'],
  34. ['HR', 'Market'],
  35. ['CSO', 'Market'],
  36. ['HR', 'Market'],
  37. ['CTO', 'Market']
  38. ],
  39. levels: [{
  40. level: 0,
  41. color: 'silver',
  42. dataLabels: {
  43. color: 'black'
  44. },
  45. height: 25
  46. }, {
  47. level: 1,
  48. color: 'silver',
  49. dataLabels: {
  50. color: 'black'
  51. },
  52. height: 25
  53. }, {
  54. level: 2,
  55. color: '#980104'
  56. }, {
  57. level: 4,
  58. color: '#359154'
  59. }],
  60. nodes: [{
  61. id: 'Shareholders'
  62. }, {
  63. id: 'Board'
  64. }, {
  65. id: 'CEO',
  66. title: 'CEO',
  67. name: 'Grethe Hjetland',
  68. image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131126/Highsoft_03862_.jpg'
  69. }, {
  70. id: 'HR',
  71. title: 'HR/CFO',
  72. name: 'Anne Jorunn Fjærestad',
  73. color: '#007ad0',
  74. image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131210/Highsoft_04045_.jpg'
  75. }, {
  76. id: 'CTO',
  77. title: 'CTO',
  78. name: 'Christer Vasseng',
  79. image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131120/Highsoft_04074_.jpg'
  80. }, {
  81. id: 'CPO',
  82. title: 'CPO',
  83. name: 'Torstein Hønsi',
  84. image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131213/Highsoft_03998_.jpg'
  85. }, {
  86. id: 'CSO',
  87. title: 'CSO',
  88. name: 'Anita Nesse',
  89. image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131156/Highsoft_03834_.jpg'
  90. }, {
  91. id: 'Product',
  92. name: 'Product developers'
  93. }, {
  94. id: 'Web',
  95. name: 'Web devs, sys admin'
  96. }, {
  97. id: 'Sales',
  98. name: 'Sales team'
  99. }, {
  100. id: 'Market',
  101. name: 'Marketing team',
  102. column: 5
  103. }],
  104. colorByPoint: false,
  105. color: '#007ad0',
  106. dataLabels: {
  107. color: 'white'
  108. },
  109. borderColor: 'white',
  110. nodeWidth: 65
  111. }],
  112. tooltip: {
  113. outside: true
  114. },
  115. exporting: {
  116. allowHTML: true,
  117. sourceWidth: 800,
  118. sourceHeight: 600
  119. }
  120. };
  121. return (
  122. <div id="wrapper">
  123. <div className="content-area">
  124. <HighchartsReact highcharts={Highcharts} options={options} />
  125. </div>
  126. </div>
  127. );
  128. };
  129. export default HighChartsRender;

有没有人试过在reactjs/nextjs中使用highcharts中的组织结构图?。

uklbhaso

uklbhaso1#

请注意,组织系列需要两个附加模块:

  1. <script src="https://code.highcharts.com/modules/sankey.js"></script>
  2. <script src="https://code.highcharts.com/modules/organization.js"></script>

应用编程接口:https://api.highcharts.com/highcharts/series.organization
您需要导入这些模块并对其进行初始化:https://stackblitz.com/edit/react-3gu5bv?file=index.js
应用编程接口:https://github.com/highcharts/highcharts-react

相关问题