如何从 Highchart 中仅从 Grand Summary 系列中删除每个柱线的总计

How to remove Grand total for each bar from only Grand Summary series in Highchart

提问人:Raheel Aslam 提问时间:11/15/2023 最后编辑:0stone0Raheel Aslam 更新时间:11/15/2023 访问量:31

问:

我想从“总摘要”系列中删除“每个柱线的总计”栏。我试图删除它,但它从所有系列中删除了 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>

enter image description here谢谢

JavaScript 高图表

评论

0赞 0stone0 11/15/2023
您可以删除第一个对象的第一个值吗?
0赞 Raheel Aslam 11/15/2023
如果我删除它,它将从所有系列组中删除。它不应从所有系列组中删除
0赞 0stone0 11/15/2023
啊,我明白了。请看我的回答
0赞 Raheel Aslam 11/15/2023
是的,我检查一下。谢谢

答:

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
好的,当然希望你理解我的问题。