图例与 Highcharts 中 xAxis 上的列不匹配

Question

我正在尝试在 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
    });

这是我的fiddle：https://jsfiddle.net/rprak0605/h3vtcyzn/37/

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

Answer 1

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

您可以在系列绘图选项中设置 grouping:false，但更好的显示方式是在条形图中将其显示为单个系列，其中名称是类别，没有多余的图例或令人困惑需要多种颜色。

图例与 Highcharts 中 xAxis 上的列不匹配

Legends not matching columns ticks on xAxis in Highcharts

javascript

jquery

json

highcharts

column-chart