Merged charts are appearing one over another. I want them side by side.

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

merged charts are appearing one over another. I want them side by side

问题

以下是代码部分的翻译:

  1. 我想要两个图表:饼图和面积百分比图放在同一个SVG中。饼图将位于左侧50%,面积图将位于右侧50%。
  2. 但在下面的代码中,饼图出现在面积图上面。我做错了什么?
  3. <!-- begin snippet: js hide: false console: true babel: false -->
  4. <!-- language: lang-html -->
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <title>Highcharts - 组合图表</title>
  9. <!-- 包含 Highcharts -->
  10. <script src="https://code.highcharts.com/highcharts.js"></script>
  11. <!-- 包含 Highcharts 导出模块 -->
  12. <script src="https://code.highcharts.com/modules/exporting.js"></script>
  13. </head>
  14. <body>
  15. <!-- 用于组合图表的容器 -->
  16. <div id="combinedChartContainer" style="width: 100%; height: 400px; display: flex;">
  17. <div id="pieChartContainer" style="flex: 1; padding: 10px;"></div>
  18. <div id="areaChartContainer" style="flex: 1; padding: 10px;"></div>
  19. </div>
  20. <script>
  21. // 饼图数据
  22. var pieData = [{
  23. name: '类别 1',
  24. y: 45
  25. }, {
  26. name: '类别 2',
  27. y: 55
  28. }];
  29. // 面积百分比图数据
  30. var areaPercentageData = [{
  31. name: '类别 1',
  32. data: [20, 30, 40],
  33. stack: '百分比'
  34. }, {
  35. name: '类别 2',
  36. data: [30, 40, 50],
  37. stack: '百分比'
  38. }];
  39. // 创建组合图表
  40. var combinedChart = Highcharts.chart('combinedChartContainer', {
  41. chart: {
  42. type: 'area'
  43. },
  44. title: {
  45. text: '组合图表'
  46. },
  47. xAxis: {
  48. categories: ['1月1日', '1月2日', '1月3日']
  49. },
  50. yAxis: [{
  51. title: {
  52. text: '百分比'
  53. },
  54. max: 100,
  55. stackLabels: {
  56. enabled: true,
  57. format: '{total}%'
  58. }
  59. }, {
  60. title: {
  61. text: '值'
  62. },
  63. opposite: true
  64. }],
  65. plotOptions: {
  66. area: {
  67. stacking: '百分比',
  68. lineColor: '#ffffff',
  69. lineWidth: 1,
  70. marker: {
  71. lineWidth: 1,
  72. lineColor: '#ffffff'
  73. }
  74. }
  75. },
  76. series: [{
  77. type: 'area',
  78. name: '类别 1',
  79. data: areaPercentageData[0].data,
  80. stack: '百分比',
  81. renderTo: 'areaChartContainer' // 指定面积图表容器 div
  82. }, {
  83. type: 'area',
  84. name: '类别 2',
  85. data: areaPercentageData[1].data,
  86. stack: '百分比',
  87. renderTo: 'areaChartContainer' // 指定面积图表容器 div
  88. }, {
  89. type: 'pie',
  90. name: '类别',
  91. data: pieData,
  92. size: 150,
  93. showInLegend: false,
  94. dataLabels: {
  95. enabled: true,
  96. format: '<b>{point.name}</b>: {point.percentage:.1f}%'
  97. },
  98. renderTo: 'pieChartContainer' // 指定饼图容器 div
  99. }],
  100. exporting: {
  101. enabled: true // 启用导出
  102. }
  103. });
  104. </script>
  105. </body>
  106. </html>
  107. <!-- end snippet -->

希望这可以帮助您理解代码的含义。如果您有任何进一步的问题,请随时提出。

英文:

I want two charts: pie chart and area percentage chart in same svg. Pie chart will be in left 50% and area chart will be in right 50%.

But in following code: pie chart appears over area chart. what am i doing wrong?

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

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Highcharts - Combined Chart&lt;/title&gt;
  5. &lt;!-- Include Highcharts library --&gt;
  6. &lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
  7. &lt;!-- Include Highcharts exporting module --&gt;
  8. &lt;script src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;!-- Container for the combined chart --&gt;
  12. &lt;div id=&quot;combinedChartContainer&quot; style=&quot;width: 100%; height: 400px; display: flex;&quot;&gt;
  13. &lt;div id=&quot;pieChartContainer&quot; style=&quot;flex: 1; padding: 10px;&quot;&gt;&lt;/div&gt;
  14. &lt;div id=&quot;areaChartContainer&quot; style=&quot;flex: 1; padding: 10px;&quot;&gt;&lt;/div&gt;
  15. &lt;/div&gt;
  16. &lt;script&gt;
  17. // Pie Chart Data
  18. var pieData = [{
  19. name: &#39;Category 1&#39;,
  20. y: 45
  21. }, {
  22. name: &#39;Category 2&#39;,
  23. y: 55
  24. }];
  25. // Area Percentage Chart Data
  26. var areaPercentageData = [{
  27. name: &#39;Category 1&#39;,
  28. data: [20, 30, 40],
  29. stack: &#39;percentage&#39;
  30. }, {
  31. name: &#39;Category 2&#39;,
  32. data: [30, 40, 50],
  33. stack: &#39;percentage&#39;
  34. }];
  35. // Create the combined chart
  36. var combinedChart = Highcharts.chart(&#39;combinedChartContainer&#39;, {
  37. chart: {
  38. type: &#39;area&#39;
  39. },
  40. title: {
  41. text: &#39;Combined Chart&#39;
  42. },
  43. xAxis: {
  44. categories: [&#39;1-Jan&#39;, &#39;2-Jan&#39;, &#39;3-Jan&#39;]
  45. },
  46. yAxis: [{
  47. title: {
  48. text: &#39;Percentage&#39;
  49. },
  50. max: 100,
  51. stackLabels: {
  52. enabled: true,
  53. format: &#39;{total}%&#39;
  54. }
  55. }, {
  56. title: {
  57. text: &#39;Value&#39;
  58. },
  59. opposite: true
  60. }],
  61. plotOptions: {
  62. area: {
  63. stacking: &#39;percentage&#39;,
  64. lineColor: &#39;#ffffff&#39;,
  65. lineWidth: 1,
  66. marker: {
  67. lineWidth: 1,
  68. lineColor: &#39;#ffffff&#39;
  69. }
  70. }
  71. },
  72. series: [{
  73. type: &#39;area&#39;,
  74. name: &#39;Category 1&#39;,
  75. data: areaPercentageData[0].data,
  76. stack: &#39;percentage&#39;,
  77. renderTo: &#39;areaChartContainer&#39; // specify the area chart container div
  78. }, {
  79. type: &#39;area&#39;,
  80. name: &#39;Category 2&#39;,
  81. data: areaPercentageData[1].data,
  82. stack: &#39;percentage&#39;,
  83. renderTo: &#39;areaChartContainer&#39; // specify the area chart container div
  84. }, {
  85. type: &#39;pie&#39;,
  86. name: &#39;Categories&#39;,
  87. data: pieData,
  88. size: 150,
  89. showInLegend: false,
  90. dataLabels: {
  91. enabled: true,
  92. format: &#39;&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f}%&#39;
  93. },
  94. renderTo: &#39;pieChartContainer&#39; // specify the pie chart container div
  95. }],
  96. exporting: {
  97. enabled: true // Enable exporting
  98. }
  99. });
  100. &lt;/script&gt;
  101. &lt;/body&gt;
  102. &lt;/html&gt;

<!-- end snippet -->

Screenshot of problem:
Merged charts are appearing one over another. I want them side by side.

答案1

得分: 1

以下是翻译好的部分:

这是正常行为,现在您需要定位系列。以下是示例配置:

  1. Highcharts.chart('container', {
  2. chart: {
  3. marginLeft: 0
  4. },
  5. yAxis: [{
  6. left: '50%',
  7. width: '50%'
  8. }],
  9. xAxis: [{
  10. left: '50%',
  11. width: '50%'
  12. }],
  13. series: [{
  14. type: 'areaspline',
  15. data: [1, 2, 3, 4]
  16. }, {
  17. type: 'pie',
  18. center: ['20%', '50%'],
  19. data: [1, 2, 3, 4]
  20. }]
  21. });

演示链接:
https://jsfiddle.net/BlackLabel/kdr6cz08/

英文:

This is the normal behavior and now you need to position series. Here is the example config:

  1. Highcharts.chart(&#39;container&#39;, {
  2. chart: {
  3. marginLeft: 0
  4. },
  5. yAxis: [{
  6. left: &#39;50%&#39;,
  7. width: &#39;50%&#39;
  8. }],
  9. xAxis: [{
  10. left: &#39;50%&#39;,
  11. width: &#39;50%&#39;
  12. }],
  13. series: [{
  14. type: &#39;areaspline&#39;,
  15. data: [1, 2, 3, 4]
  16. }, {
  17. type: &#39;pie&#39;,
  18. center: [&#39;20%&#39;, &#39;50%&#39;],
  19. data: [1, 2, 3, 4]
  20. }]
  21. });

Demo:
https://jsfiddle.net/BlackLabel/kdr6cz08/

huangapple
  • 本文由 发表于 2023年4月17日 02:08:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76029515.html
匿名

发表评论

匿名网友

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

确定