javascript - Highcharts 热图上的多个轴

标签 javascript highcharts heatmap highmaps

目标

我正在使用 Highcharts 热图来呈现数据,该数据必须有两个 YAxis 显示(左侧和右侧一个)。两者都是“类别”类型(也就是说由字符串驱动,而不是数值)。

问题

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

代码

Here is a fiddle with my code 。我特别提请您注意以下几行:

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 列正确显示在图表的左侧。另请注意,第二个 y 轴没有视觉表示(它设置为显示在图形的右侧,位于绘图和图例之间)。

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

文档

代码似乎完全符合 the official examples for dual Y axes 。即使完全复制该示例代码也会导致相同的失败。我知道 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
        }],

示例:

关于javascript - Highcharts 热图上的多个轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37168070/

相关文章:

javascript - JS变量覆盖是如何工作的?

php - 如何在 jQuery 警报中显示 PHP 数组?

r - 在 x 轴上只有一个变量的 Corrplot

d3.js - 在 D3.js 中绘制 17K x 1K 数据点热图的建议

javascript - jQuery sort 和 appendTo 在 Internet Explorer 和 Safari 中不起作用

javascript - 如何在javascript中找到捏合方向?

javascript - AnyThing Slider JQuery 插件在 Chrome 中工作,在 Firefox 中不工作,找不到错误

javascript - Highcharts 异步钻取(3 级)- 钻取不起作用

javascript - Highcharts标签格式化程序来查询mysql?

javascript - 响应式热图