Highcharts X轴标签在侧面答案

【问题标题】：Highcharts X-axis labels on the sideHighcharts X轴标签在侧面
【发布时间】：2019-02-25 14:48:11
【问题描述】：

我正在使用 Highcharts，并且我曾经能够在侧面获得标签。但它现在不起作用，我错过了什么吗？红色箭头是我想要的标签，如下例所示。

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/

这是我正在使用的代码，我以动态方式添加系列。

 credits: {
                enabled: false
            },
            chart: {
                type: 'bar'
            },
            xAxis: {
                categories: ['Jan', 'Feb'],
                labels: {
                    enabled: true,
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Score',
                    align: 'high'
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            }
        });

        // Add Series
        var detailchart = $('#chart-detail').highcharts();
        var categories = new Array;

        // Set Chart Title
        detailchart.setTitle({text: results[0].category});

        $.each(results, function(i, data){
            categories.push(data.name);
            detailchart.addSeries({
                name: data.name,
                data: [data.score]
            });
        });

        detailchart.xAxis[0].setCategories(["1", "2"]);
        $('#chart-detail').highcharts().reflow();

Results 是一个看起来像这样的数组（我是通过 ajax 得到的）：

【问题讨论】：

你的图片和你链接的 JSFiddle 有什么区别吗？在我看来是一样的。
确实，这就是我不明白的
从您的屏幕截图中我可以明显看出，您只有一个类别的数据（“我的商业警觉性”）。这可以解释为什么您将四个条形图与同一个 x 轴标签挂钩。我也很想知道为什么您在图表选项中定义了一对类别，然后在代码中使用setCategories 再次这样做。这可能是您的标签显示为“0”而不是您喜欢的名称的原因。

标签： javascript jquery highcharts

【解决方案1】：

我从您的代码中了解到，您希望指定名称为 1 和 2 的两个类别，但您没有为第二个类别指定任何数据，因此图表上显示的唯一类别是 1。您的数据数组每个系列必须有每个类别的元素。例如，如果您有两个类别，您应该考虑在每个系列中有两个数据元素。在这一行 data: [data.score] 中，您只是指定了数据数组中的一个元素。您的代码应该是这样的：（根据您的需要使其动态化）

$.each(results, function(i, data){
        categories.push(data.name);
        detailchart.addSeries({
            name: data.name,
            data: [data.score, 40], //40 is some data for your second category.
        });
    });

演示： http://jsfiddle.net/u6crkatv/

【讨论】：

感谢您三年多来的回答哈哈。
我没有真正检查日期 :D 无论如何我希望它会帮助有同样问题的人。
哈哈，我相信它会的。感谢您的代码记忆通道之旅。

【解决方案2】：

您只需要使用 4 个系列，每个系列都有一个数据点。

series: [{
        name: 'Year 1800',
        data: [107]
    }, {
        name: 'Year 1900',
        data: [138]
    }, {
        name: 'Year 2008',
        data: [973]
    },{
        name: 'Year 20098',
        data: [973]
    }]

示例：http://jsfiddle.net/y9wzggc4/

【讨论】：

这在左侧边栏中也只显示零？不是名字？谢谢！