highcharts - Highcharts xAxis 需要三个图表的相同标签
问题描述
我使用 Bootstrap 有三个彼此相邻的 HighCharts 折线图。我希望它们都显示相同的 xAxis 标签。第一个显示 2025 和 2050。第二个显示 2020 和 2040。第一个图表有 yAxis，但其他两个没有。我猜是因为第一个由于 yAxis 而稍微窄一些，它在 xAxis 上显示了不同的标签。我希望这三个都一样。我试过使用allowOverlap、旋转和步进，但我无法让它工作。这是JS Fiddle。
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div id="container2"></div>
</div>
<div class="col-md-4">
<div id="container3"></div>
</div>
<div class="col-md-4">
<div id="container4"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container" id="content">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div id="container2"></div>
</div>
<div class="col-md-4">
<div id="container3"></div>
</div>
<div class="col-md-4">
<div id="container4"></div>
</div>
</div>
</div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
Highcharts.chart('container2', {
title: {
text: 'Low Battery Cost Case',
style: {
fontSize: '16px'
}
},
yAxis: {
title: {
text: 'Capacity (GW)'
},
max: 300
},
labels: {
step: 0
},
legend: {
align: 'left',
verticalAlign: 'bottom',
margin: 30,
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 2010,
pointInterval: 2
}
},
series: [{
name: 'Energy Time-Shifting & Operating Reserves (No Firm Capacity From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 4.21110359791565, 6.84334322867839, 7.20182619975514, 7.8004278261306, 10.1063979510877, 13.7963553953421, 14.6735914371287, 18.5837874315195, 20.3731482407672, 24.0988019699228, 32.0357544751444, 45.1519218212058, 56.3857942558924, 81.1292491322195, 95.7124408905994, 131.978838410468, ]
}, {
name: 'Firm Capacity & Energy Time-Shifting (No Operating Reserves From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 3.70492103862706, 6.32644821179908, 6.7912945899555, 10.8852803548114, 17.2185962209215, 31.6655455463024, 53.0346762234928, 79.5213653476683, 99.0449876736713, 122.329600848415, 149.816960931063, 184.311271042092, 218.757764806966, 254.683442071981, 290.19930101708, 346.882919482988, ]
}, {
name: 'Firm Capacity & Operating Reserves (No Energy Time-Shifting From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.5286257976622, 5.12758943424106, 5.99409380798642, 9.76453882541978, 12.0745968401012, 21.1834214272343, 33.1674795094693, 48.7307134642147, 56.9008609975166, 68.4659981520015, 84.0579790344369, 101.373936044519, 120.070540082055, 142.483062401683, 160.447936224237, 185.693139471677, ]
}]
});
</script>
<script type="text/javascript">
Highcharts.chart('container3', {
title: {
text: 'Reference Cost Case',
style: {
fontSize: "16px"
}
},
yAxis: {
title: {
text: undefined
},
max: 300,
labels: {
enabled: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 2010,
pointInterval: 2
}
},
series: [{
name: 'Energy Time-Shifting & Operating Reserves (No Firm Capacity From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.63942870272505, 5.22970733499782, 5.27920675745647, 5.30783211587234, 6.19751680650459, 7.3082097366251, 6.98022982001149, 7.13503050555605, 7.61987581404283, 7.60347325311543, 9.61344293269395, 13.3757198039836, 13.3384931273145, 22.0784478667247, 28.3335699220639, 40.7908062298414, ]
}, {
name: 'Firm Capacity & Energy Time-Shifting (No Operating Reserves From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.54572501067027, 5.14824089370969, 5.29820021228112, 6.63781456129245, 8.85688437771603, 13.8658896319254, 27.1931002936285, 39.9357130097189, 58.6214614824223, 77.1254106761073, 95.268406121634, 112.405884767091, 133.027723197789, 155.277682659625, 176.596178226657, 192.675764588631, ]
}, {
name: 'Firm Capacity & Operating Reserves (No Energy Time-Shifting From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.21829103663336, 4.81291957130873, 5.02399582218993, 6.57908016456348, 7.63005997606452, 11.0257789859977, 13.330738818622, 19.4783948566959, 27.6707413376832, 36.5813442540389, 47.469590556968, 63.1212738306735, 84.0763878821262, 102.32992781037, 120.887859787506, 136.565976817233, ]
}]
});
</script>
</div>
<script type="text/javascript">
Highcharts.chart('container4', {
title: {
text: 'High Battery Cost Case',
style: {
fontSize: "16px"
}
},
xAxis: {
step: 1
},
yAxis: {
title: {
text: undefined
},
max: 300,
labels: {
enabled: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 2010,
pointInterval: 2
}
},
series: [{
name: 'Energy Time-Shifting & Operating Reserves (No Firm Capacity From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.57743715547351, 5.16759082894289, 5.16241825223985, 5.14439305708559, 5.05030457659485, 5.07416720920075, 4.74613468727552, 4.86135888180044, 4.57243700972263, 3.21005303174178, 4.19807863644804, 5.19626628040456, 5.4910646217716, 7.97589112588165, 10.2510871811584, 17.3461595503648, ]
}, {
name: 'Firm Capacity & Energy Time-Shifting (No Operating Reserves From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.50105411682933, 5.0913241792388, 5.15834598573316, 5.28947748602645, 5.6428616301249, 6.69345386943927, 8.41024825375956, 10.7921797139738, 14.1403806758731, 22.226765757974, 33.1613582581713, 45.8937441121399, 64.2670833917625, 83.84755649335, 97.6334741298098, 108.616739058021, ]
}, {
name: 'Firm Capacity & Operating Reserves (No Energy Time-Shifting From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.21625879407406, 4.80766191119213, 4.94252488836913, 5.82876338692197, 6.25057839402891, 7.10524981051512, 8.25532328086167, 10.5225270531993, 11.6653350971262, 15.5267974765324, 20.5477797210612, 25.8764046693577, 34.7879150374453, 46.5393009966628, 52.3945287374012, 65.0583419652337, ]
}]
});
</script>
<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><script type="text/javascript">
Highcharts.chart('container2', {
title: {
text: 'Low Battery Cost Case',
style: {
fontSize: '16px'
}
},
yAxis: {
title: {
text: 'Capacity (GW)'
},
max: 300
},
labels: {
step: 0
},
legend: {
align: 'left',
verticalAlign: 'bottom',
margin: 30,
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 2010,
pointInterval: 2
}
},
series: [{
name: 'Energy Time-Shifting & Operating Reserves (No Firm Capacity From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 4.21110359791565, 6.84334322867839, 7.20182619975514, 7.8004278261306, 10.1063979510877, 13.7963553953421, 14.6735914371287, 18.5837874315195, 20.3731482407672, 24.0988019699228, 32.0357544751444, 45.1519218212058, 56.3857942558924, 81.1292491322195, 95.7124408905994, 131.978838410468,]
}, {
name: 'Firm Capacity & Energy Time-Shifting (No Operating Reserves From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 3.70492103862706, 6.32644821179908, 6.7912945899555, 10.8852803548114, 17.2185962209215, 31.6655455463024, 53.0346762234928, 79.5213653476683, 99.0449876736713, 122.329600848415, 149.816960931063, 184.311271042092, 218.757764806966, 254.683442071981, 290.19930101708, 346.882919482988,]
}, {
name: 'Firm Capacity & Operating Reserves (No Energy Time-Shifting From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.5286257976622, 5.12758943424106, 5.99409380798642, 9.76453882541978, 12.0745968401012, 21.1834214272343, 33.1674795094693, 48.7307134642147, 56.9008609975166, 68.4659981520015, 84.0579790344369, 101.373936044519, 120.070540082055, 142.483062401683, 160.447936224237, 185.693139471677,]
}]
});
</script>
<script type="text/javascript">
Highcharts.chart('container3', {
title: {
text: 'Reference Cost Case',
style: {
fontSize: "16px"
}
},
yAxis: {
title: {
text: undefined
},
max:300,
labels: {
enabled: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
enabled:false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 2010,
pointInterval: 2
}
},
series: [{
name: 'Energy Time-Shifting & Operating Reserves (No Firm Capacity From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.63942870272505, 5.22970733499782, 5.27920675745647, 5.30783211587234, 6.19751680650459, 7.3082097366251, 6.98022982001149, 7.13503050555605, 7.61987581404283, 7.60347325311543, 9.61344293269395, 13.3757198039836, 13.3384931273145, 22.0784478667247, 28.3335699220639, 40.7908062298414,]
}, {
name: 'Firm Capacity & Energy Time-Shifting (No Operating Reserves From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.54572501067027, 5.14824089370969, 5.29820021228112, 6.63781456129245, 8.85688437771603, 13.8658896319254, 27.1931002936285, 39.9357130097189, 58.6214614824223, 77.1254106761073, 95.268406121634, 112.405884767091, 133.027723197789, 155.277682659625, 176.596178226657, 192.675764588631,]
}, {
name: 'Firm Capacity & Operating Reserves (No Energy Time-Shifting From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.21829103663336, 4.81291957130873, 5.02399582218993, 6.57908016456348, 7.63005997606452, 11.0257789859977, 13.330738818622, 19.4783948566959, 27.6707413376832, 36.5813442540389, 47.469590556968, 63.1212738306735, 84.0763878821262, 102.32992781037, 120.887859787506, 136.565976817233,]
}]
});
</script></div>
<script type="text/javascript">
Highcharts.chart('container4', {
title: {
text: 'High Battery Cost Case',
style: {
fontSize: "16px"
}
},
xAxis: {
step: 1
},
yAxis: {
title: {
text: undefined
},
max:300,
labels: {
enabled: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
enabled:false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointStart: 2010,
pointInterval: 2
}
},
series: [{
name: 'Energy Time-Shifting & Operating Reserves (No Firm Capacity From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.57743715547351, 5.16759082894289, 5.16241825223985, 5.14439305708559, 5.05030457659485, 5.07416720920075, 4.74613468727552, 4.86135888180044, 4.57243700972263, 3.21005303174178, 4.19807863644804, 5.19626628040456, 5.4910646217716, 7.97589112588165, 10.2510871811584, 17.3461595503648,]
}, {
name: 'Firm Capacity & Energy Time-Shifting (No Operating Reserves From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.50105411682933, 5.0913241792388, 5.15834598573316, 5.28947748602645, 5.6428616301249, 6.69345386943927, 8.41024825375956, 10.7921797139738, 14.1403806758731, 22.226765757974, 33.1613582581713, 45.8937441121399, 64.2670833917625, 83.84755649335, 97.6334741298098, 108.616739058021,]
}, {
name: 'Firm Capacity & Operating Reserves (No Energy Time-Shifting From Storage)',
data: [0.038, 0.1532, 0.2706, 0.8332, 1.3213, 2.21625879407406, 4.80766191119213, 4.94252488836913, 5.82876338692197, 6.25057839402891, 7.10524981051512, 8.25532328086167, 10.5225270531993, 11.6653350971262, 15.5267974765324, 20.5477797210612, 25.8764046693577, 34.7879150374453, 46.5393009966628, 52.3945287374012, 65.0583419652337,]
}]
});
</script>
感谢您的任何帮助，您可以提供。
解决方案
推荐阅读
- python - .plot() 保留旧图并每次在其上绘制新图
- html - TikZJax 生成的 svg 中的一些数学符号渲染不正确
- postman - 邮递员 - 未在正文的预览选项卡上呈现响应 - 仅显示一个小缩略图
- python - 查找数组对 (a,b) 的数量，其中 abs(ab) = k in O(n)
- azure-cosmosdb - 有没有办法将分析存储添加到现有的 Azure Cosmos DB 容器？
- python - 将 localhost 数据库连接到 Web 应用程序?
- java - 查询中的 JDBI 绑定值或空值？
- comments - 我可以在 doxygen @ref 中使用反引号和括号吗？
- matlab - S-Function MATLAB simulink flag=0
- javascript - 参数出来未定义