图例与Highcharts中xAxis上的列刻度不匹配 [英] Legends not matching columns ticks on xAxis in Highcharts

问题描述

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

I am trying to create a column chart on Highcharts but I am facing some errors.

1. 为什么我的列从图表的起点开始那么远?
2. 我希望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:

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/

我做错了什么?我该如何解决?

What am I doing wrong? How can I fix this?

推荐答案

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

This is the expected output of the data and configuration. You have multiple series, each with a single data point. The chart will by default group them.

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

You can set grouping:false in the series plot options, but a much better way to display this would be as a single series in a bar chart, where the name is the category and no redundant legend or confusing multiple colors are required.

这篇关于图例与Highcharts中xAxis上的列刻度不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！