英文:
merged charts are appearing one over another. I want them side by side
问题
以下是代码部分的翻译：
我想要两个图表：饼图和面积百分比图放在同一个SVG中。饼图将位于左侧50％，面积图将位于右侧50％。
但在下面的代码中，饼图出现在面积图上面。我做错了什么？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Highcharts - 组合图表</title>
<!-- 包含 Highcharts 库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 包含 Highcharts 导出模块 -->
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<!-- 用于组合图表的容器 -->
<div id="combinedChartContainer" style="width: 100%; height: 400px; display: flex;">
<div id="pieChartContainer" style="flex: 1; padding: 10px;"></div>
<div id="areaChartContainer" style="flex: 1; padding: 10px;"></div>
</div>
<script>
// 饼图数据
var pieData = [{
name: '类别 1',
y: 45
}, {
name: '类别 2',
y: 55
}];
// 面积百分比图数据
var areaPercentageData = [{
name: '类别 1',
data: [20, 30, 40],
stack: '百分比'
}, {
name: '类别 2',
data: [30, 40, 50],
stack: '百分比'
}];
// 创建组合图表
var combinedChart = Highcharts.chart('combinedChartContainer', {
chart: {
type: 'area'
},
title: {
text: '组合图表'
},
xAxis: {
categories: ['1月1日', '1月2日', '1月3日']
},
yAxis: [{
title: {
text: '百分比'
},
max: 100,
stackLabels: {
enabled: true,
format: '{total}%'
}
}, {
title: {
text: '值'
},
opposite: true
}],
plotOptions: {
area: {
stacking: '百分比',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
type: 'area',
name: '类别 1',
data: areaPercentageData[0].data,
stack: '百分比',
renderTo: 'areaChartContainer' // 指定面积图表容器 div
}, {
type: 'area',
name: '类别 2',
data: areaPercentageData[1].data,
stack: '百分比',
renderTo: 'areaChartContainer' // 指定面积图表容器 div
}, {
type: 'pie',
name: '类别',
data: pieData,
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f}%'
},
renderTo: 'pieChartContainer' // 指定饼图容器 div
}],
exporting: {
enabled: true // 启用导出
}
});
</script>
</body>
</html>
<!-- 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 -->
<!DOCTYPE html>
<html>
<head>
<title>Highcharts - Combined Chart</title>
<!-- Include Highcharts library -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Include Highcharts exporting module -->
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<!-- Container for the combined chart -->
<div id="combinedChartContainer" style="width: 100%; height: 400px; display: flex;">
<div id="pieChartContainer" style="flex: 1; padding: 10px;"></div>
<div id="areaChartContainer" style="flex: 1; padding: 10px;"></div>
</div>
<script>
// Pie Chart Data
var pieData = [{
name: 'Category 1',
y: 45
}, {
name: 'Category 2',
y: 55
}];
// Area Percentage Chart Data
var areaPercentageData = [{
name: 'Category 1',
data: [20, 30, 40],
stack: 'percentage'
}, {
name: 'Category 2',
data: [30, 40, 50],
stack: 'percentage'
}];
// Create the combined chart
var combinedChart = Highcharts.chart('combinedChartContainer', {
chart: {
type: 'area'
},
title: {
text: 'Combined Chart'
},
xAxis: {
categories: ['1-Jan', '2-Jan', '3-Jan']
},
yAxis: [{
title: {
text: 'Percentage'
},
max: 100,
stackLabels: {
enabled: true,
format: '{total}%'
}
}, {
title: {
text: 'Value'
},
opposite: true
}],
plotOptions: {
area: {
stacking: 'percentage',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
type: 'area',
name: 'Category 1',
data: areaPercentageData[0].data,
stack: 'percentage',
renderTo: 'areaChartContainer' // specify the area chart container div
}, {
type: 'area',
name: 'Category 2',
data: areaPercentageData[1].data,
stack: 'percentage',
renderTo: 'areaChartContainer' // specify the area chart container div
}, {
type: 'pie',
name: 'Categories',
data: pieData,
size: 150,
showInLegend: false,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f}%'
},
renderTo: 'pieChartContainer' // specify the pie chart container div
}],
exporting: {
enabled: true // Enable exporting
}
});
</script>
</body>
</html>
<!-- end snippet -->
Screenshot of problem:
答案1
得分: 1
以下是翻译好的部分：
这是正常行为，现在您需要定位系列。以下是示例配置：
Highcharts.chart('container', {
chart: {
marginLeft: 0
},
yAxis: [{
left: '50%',
width: '50%'
}],
xAxis: [{
left: '50%',
width: '50%'
}],
series: [{
type: 'areaspline',
data: [1, 2, 3, 4]
}, {
type: 'pie',
center: ['20%', '50%'],
data: [1, 2, 3, 4]
}]
});
演示链接：
https://jsfiddle.net/BlackLabel/kdr6cz08/
英文:
This is the normal behavior and now you need to position series. Here is the example config:
Highcharts.chart('container', {
chart: {
marginLeft: 0
},
yAxis: [{
left: '50%',
width: '50%'
}],
xAxis: [{
left: '50%',
width: '50%'
}],
series: [{
type: 'areaspline',
data: [1, 2, 3, 4]
}, {
type: 'pie',
center: ['20%', '50%'],
data: [1, 2, 3, 4]
}]
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论