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

演示链接：
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
  • highcharts
  • javascript
匿名

发表评论

匿名网友

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

确定