【问题标题】:Multiple Axes on a Highcharts HeatmapHighcharts 热图上的多个轴
【发布时间】:2016-05-11 16:12:41
【问题描述】:

目标

我正在使用 Highcharts 热图来呈现必须有两个 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 列在图表左侧正确显示。另请注意,第二个 yAxis(设置为显示在图形右侧,位于绘图和图例之间)没有可视化表示。

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

文档

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

结论

非常感谢任何帮助让 Y 轴标签显示在图的两侧。提前谢谢你。

【问题讨论】:

  • 有趣。如果您检查图表,您会看到 DOM 中有 2 个 g 类“highcharts-axis-labels highcharts-yaxis-labels”的组件。第二个似乎是您的第二个 yAxis,但它是 DOM 中的一个空元素。
  • 我观察到了这一点,这是我怀疑这是热图和多轴功能之间的问题的主要原因之一(而不是我的实现中的错误)。
  • 是的,我认为 highcharts 忽略了任何额外的轴分配。你能通过某种主轴标记达到预期的效果吗?
  • 嗯,这不是一个坏主意。但是,我犹豫是否这样做,因为该图形是类似样式图形的大型库的一部分,所有这些都使用适当的 Y 轴标签。它们肯定需要在视觉上保持一致,理想情况下它们也应该以某种一致的方式编写。不过,我会玩这个,如果需要的话,我会把它放在口袋里。
  • 如何设置linkedTo参数jsfiddle.net/3zun7pz4

标签: javascript highcharts heatmap highmaps


【解决方案1】:

您可以使用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
        }],

例子:

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-11-30
    • 1970-01-01
    • 2015-05-18
    • 1970-01-01
    • 1970-01-01
    • 2022-06-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多