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

Posted 2023-05-08

【中文标题】图例与 Highcharts 中 xAxis 上的列刻度不匹配

【英文标题】：Legends not matching columns ticks on xAxis in Highcharts

【发布时间】：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/

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

【参考方案1】：

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

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

【讨论】：

谢谢。我是 highcharts 的新手。可以的话可以举个例子吗？

快速更新将原始数组映射到系列数据对象而不是系列对象：jsfiddle.net/a76pwq8k

太棒了！非常感谢！