Highcharts热图上的多个轴

Multiple Axes on a Highcharts Heatmap

本文关键字:Highcharts      更新时间:2023-09-26

目标

我正在使用Highcharts Heatmap来显示数据,该数据必须有两个YAxis显示(在左边和右边)。两者都属于"类别"类型(也就是说,由字符串而非数值驱动)。

问题

定义多个Y轴时,仅显示第一个Y轴的标签。

代码

这是我的密码。我想特别提请您注意以下几行:

yAxis: [{
            categories: ["For instance, on the planet Earth, man had always assumed that he was more intelligent than dolphins because he had achieved so much—the wheel, New York, wars and so on—whilst all the dolphins had ever done was muck about in the water having a good time. But conversely, the dolphins had always believed that they were far more intelligent than man—for precisely the same reasons",
                         'The man who invented the Total Perspective Vortex did so basically in order to annoy his wife.',
                         'The major problem - one of the major problems, for there are several - one of the many major problems with governing people is that of whom you get to do it; or rather of who manages to get people to let them do it to them.',
                         'My doctor says that I have a malformed public-duty gland and a natural deficiency in moral fibre',
                         'He felt uncertain as to whether the fourth drink had understood all that, so he sent down a fifth to explain the plan more fully and a sixth for moral support.'],
            title: null,
            gridLineWidth: 0,
            labels: {
                style: {
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    float: 'left'
                }
            }
        },{
            categories: ["1/7", "2/7", "3/7", "4/7", "5/7"],
            title: null,
            opposite: true,
            // Note: The following two lines appear to be unnecessary
            type: 'category',
            visible: true
        }],

观察第一个yAxis列是否正确地显示在图表的左侧。还要注意,没有第二个yAxis的视觉表示(它设置为显示在图形的右侧,位于绘图和图例之间)。

有趣的是,如果我重新排列两个Y轴,右边的类别现在会出现,左边的类别会消失。另外有趣的是;如果轴被赋予了标题(删除或更改了title: null),则标题会出现在正确的位置。

文档

该代码似乎与双Y轴的官方示例完全一致。即使复制该示例代码也会导致同样的失败。我知道HeatMap图表类型不一定是核心库的一部分,但我没有发现任何迹象表明这个不应该与HeatMap一起使用。

结论

如果能为在绘图两侧显示Y轴标签提供任何帮助,我们将不胜感激。提前谢谢。

您可以使用linkedTo参数。

yAxis: [{
        type: 'category',
            categories: ["For instance, on the planet Earth, man had always assumed that he was more intelligent than dolphins because he had achieved so much—the wheel, New York, wars and so on—whilst all the dolphins had ever done was muck about in the water having a good time. But conversely, the dolphins had always believed that they were far more intelligent than man—for precisely the same reasons", 'The man who invented the Total Perspective Vortex did so basically in order to annoy his wife.', 'The major problem - one of the major problems, for there are several - one of the many major problems with governing people is that of whom you get to do it; or rather of who manages to get people to let them do it to them.', 'My doctor says that I have a malformed public-duty gland and a natural deficiency in moral fibre', 'He felt uncertain as to whether the fourth drink had understood all that, so he sent down a fifth to explain the plan more fully and a sixth for moral support.'],
            title: null,
            gridLineWidth: 0,
            labels: {
                style: {
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    float: 'left'
                }
            }
        },{
        linkedTo: 0,
            categories: ["1/7", "2/7", "3/7", "4/7", "5/7"],
            title: null,
            opposite: true,
            // Note: The following two lines appear to be unnecessary
            type: 'category',
            visible: true
        }],

示例:

  • https://jsfiddle.net/3zun7pz4/