提问人:Raheel Aslam 提问时间:11/15/2023 最后编辑:0stone0Raheel Aslam 更新时间:11/15/2023 访问量:31
如何从 Highchart 中仅从 Grand Summary 系列中删除每个柱线的总计
How to remove Grand total for each bar from only Grand Summary series in Highchart
问:
我想从“总摘要”系列中删除“每个柱线的总计”栏。我试图删除它,但它从所有系列中删除了 4 月、5 月、6 月。我需要保留在其他系列组中,但不需要保留在 Grand Summary 中。这是我的数据和脚本。您可以检查类别是否具有“总摘要”,则“每个柱线的总计”栏将不会按顺序显示。 这是我的剧本:
var seriesData = [
{
"data": [
690,
230,
230,
230
],
"name": "Grand Total For Each Bars"
},
{
"data": [
230,
100,
100,
100
],
"name": "April"
},
{
"data": [
230,
50,
50,
50
],
"name": "May"
},
{
"data": [
230,
80,
80,
80
],
"name": "Jun"
}
];
var categoriesData = ['Grand Summary', 'April', 'May', 'Jun'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Remove Grand total for each bars in Grand total sumary series group',
align: 'left'
},
xAxis: {
categories: categoriesData,
type: 'datetime',
title: {
text: null
},
},
yAxis: {
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
},
gridLineWidth: 0
},
series: seriesData
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
</p>
</figure>
答:
1赞
0stone0
11/15/2023
#1
您不应“删除”它,而应将其设置为 。null
硬编码解决方案:
seriesData[0].data[0] = null;
如果您需要动态的东西,请使用。find()
var seriesData = [
{
"data": [
690,
230,
230,
230
],
"name": "Grand Total For Each Bars"
},
{
"data": [
230,
100,
100,
100
],
"name": "April"
},
{
"data": [
230,
50,
50,
50
],
"name": "May"
},
{
"data": [
230,
80,
80,
80
],
"name": "Jun"
}
];
seriesData[0].data[0] = null;
var categoriesData = ['Grand Summary', 'April', 'May', 'Jun'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Remove Grand total for each bars in Grand total sumary series group',
align: 'left'
},
xAxis: {
categories: categoriesData,
type: 'datetime',
title: {
text: null
},
},
yAxis: {
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
},
gridLineWidth: 0
},
series: seriesData
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 400px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
</p>
</figure>
评论
0赞
Raheel Aslam
11/15/2023
谢谢,它正在工作。里面有一件事。我们可以在左侧添加新栏并显示除大摘要之外的所有类别的总和吗?如果所有柱线的总和。请检查图像 pasteboard.co/RF6cS6Q4wB9l.png
1赞
0stone0
11/15/2023
嗯,我不太确定如何快速做到这一点。我可能会在今天晚些时候对此进行调查。但我建议在另一个问题中提出这个问题。
0赞
Raheel Aslam
11/15/2023
好的,当然希望你理解我的问题。
上一个:为什么最后一个标签被隐藏了?
下一个:如何将标题居中放在列的中心?
评论