图例与 Highcharts 中 xAxis 上的列刻度不匹配答案

【问题标题】：Legends not matching columns ticks on xAxis in Highcharts图例与 Highcharts 中 xAxis 上的列刻度不匹配
【发布时间】：2019-12-22 01:26:50
【问题描述】：

我正在尝试在 Highcharts 上创建柱形图，但遇到了一些错误。

为什么我的列距离图表开头这么远？
我希望 xAxis 标签与图例相匹配。但我只能看到第一个图例显示在图表中间

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 600px"></div>

JSON：

let yo = [
{
    "hp": "Harry Potter",
    "hp_num": 1426
},
{
    "hp": "Ronald Weasley",
    "hp_num": 1065
},
{
    "hp": "Hermione Granger",
    "hp_num": 14653
},
{
    "hp": "Neville Longbottom",
    "hp_num": 64625
},
{
    "hp": "Luna Lovegood",
    "hp_num": 613
},
{
    "hp": "Ginny Weasley",
    "hp_num": 3308
},
{
    "hp": "Fred Weasley",
    "hp_num": 2865
},
{
    "hp": "George Weasley",
    "hp_num": 16346
},
{
    "hp": "Charlie Weasley",
    "hp_num": 1000
},
{
    "hp": "Bill Weasley",
    "hp_num": 839
},
{
    "hp": "Arthur Weasley",
    "hp_num": 7643
},
{
    "hp": "Molly Weasley",
    "hp_num": 87804
},
{
    "hp": "Percy Weasley",
    "hp_num": 43712
},
{
    "hp": "Seamus Finnegan",
    "hp_num": 24984
},
{
    "hp": "Dean Thomas",
    "hp_num": 62440
},
{
    "hp": "Lee Jordan",
    "hp_num": 700
},
{
    "hp": "Hagrid",
    "hp_num": 5383
}
]

JavaScript：

let series = [];
    yo.forEach((elem, i) =>  {
        i = 0;
        series.push({
            name: elem.hp,
            data: [{
                x: i++,
                y: elem.hp_num
            }]
        });
    });
    Highcharts.chart(container, {
        chart: {
            height: 750,
            type: 'column'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: yo.map(elem => elem.hp)
                // type: 'category',
                // labels: {
                //     rotation: -45
                // },
        },
        tooltip: {
            formatter: function() {
                let tooltip = `
                    <span style="font-weight:500;"><b>${this.series.name}</b></span>
                    <br /><br />
                    <span>Browser Count: ${this.y}</span>
                    `;
                return tooltip;
            },
            useHTML: true
        },
        yAxis: [{
            title: {
                text: 'Count'
            }
        }],
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {

                        }
                    }
                }
            }
        },
        legend: {
            labelFormatter: function() {
               return this.name;
            }
        },
        series: series
    });

这是我的小提琴：https://jsfiddle.net/rprak0605/h3vtcyzn/37/

我做错了什么？我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery json highcharts column-chart

【解决方案1】：

这是数据和配置的预期输出。您有多个系列，每个系列都有一个数据点。默认情况下，图表会将它们分组。

您可以在系列绘图选项中设置grouping:false，但更好的显示方式是在条形图中作为单个系列，其中名称是类别，不需要多余的图例或混淆的多种颜色.

【讨论】：

谢谢。我是 highcharts 的新手。可以的话可以举个例子吗？
快速更新将原始数组映射到系列数据对象而不是系列对象：jsfiddle.net/a76pwq8k
太棒了！非常感谢！