Highcharts 热图上的多个轴
Multiple Axes on a Highcharts Heatmap
目标
我正在使用 Highcharts 热图来呈现数据,该数据必须有两个 YAxis 显示(一个在左边,一个在右边)。两者都是 "categories" 类型(也就是说由字符串驱动,而不是数值)。
问题
当定义了多个 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
}],
示例:
目标
我正在使用 Highcharts 热图来呈现数据,该数据必须有两个 YAxis 显示(一个在左边,一个在右边)。两者都是 "categories" 类型(也就是说由字符串驱动,而不是数值)。
问题
当定义了多个 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
}],
示例: