highcharts基于负/正值添加yAxis标签

Question

我有一个柱形图，显示了美国和其他国家之间的贸易平衡。

我需要能够在图表的右侧显示正数是进口（正贸易差额），负数是出口（负贸易差额）。

在这个小提琴中可以看到写得不好的开始

我正在尝试使用以下（丑陋的）代码添加导入/导出标签：

 yAxis: [{

        title: {
            text: 'Millions of Dollars'
        }
    },{
        opposite: true,
        title : {
          rotation: 0,
          text: 'Imports',
          x: 17,
          y: -48
      }
    },{
      opposite: true,
        title : {
          rotation: 0,
          text: 'Exports',
          x: -40,
          y : 5
      }
    }]

我正在寻找在yAxis上为正值和负值创建类似类别的东西，以将正值标记为进口，将负值标记为出口。

希望保留在高位图中，以便高位图附带的所有不错的选项（下载等）也显示此辅助yAxis标签。

有什么简单的东西我无法实现的吗？

谢谢！！

Answer 1

由于您不是自己的解决方案，因此这是我自己的肮脏hacky解决方案，它可能更糟，但是您至少不需要指定轴的位置（排序）。

这个想法是添加一个没有名称的额外类别，添加另一个具有2个点的系列，该类别的x值为x，名称为“ import”和“ export”。

您最终可以根据您拥有的数据得出这2个“隐藏”点的值，以便它们可以自动调整。 很脏，但是可以用。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Widget trade balance'
        },

        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec',
                ""
            ],
            crosshair: true
        },
        yAxis: [{

            title: {
                text: 'Millions of Dollars'
            }
        }],

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [ 
                {            
                    type: "scatter",                    
                color: "transparent",
                data: [ { x:12, y:20,name:"Imports" }, { x:12, y:-20,name:"Exports" } ],
                showInLegend: false,
                dataLabels: {
                        enabled: true,
                    formatter: function () { return this.point.name; },                    
                    y: 10
                }
            },
        {
            name: 'Canada',
            data: [-83.6, -78.8, -98.5, -93.4, -66.0, -44.5, -105.0, -104.3, -91.2, -83.5, -106.6, -92.3]

        }, {
            name: 'Mexico',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'England',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });
});

参见小提琴http://jsfiddle.net/r2etx98t/

Answer 2

我最终使用以下命令手动定位文本

参见工作http://jsfiddle.net/0s17qt56/4/

下面摘录

labels: {
      items : [{
         html : 'Imports',
         style : {
           left: '710px',
           top : '130px'
         }
       },{
         html : 'Exports',
         style : {
           left: '710px',
           top : '70px'
         }
       }]
    },