highcharts根据负值/正值添加yAxis标签

Question

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

我需要能够在图表的右侧显示正数是进口(正贸易平衡)，负数是出口(负贸易平衡)。

在这个fiddle中可以看到一个写得很糟糕的开头

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

 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上创建一个类似于正值和负值的类别，以便将正值标记为导入，将负值标记为导出。

我想保留在highcharts中，因此highcharts (下载等)附带的所有漂亮选项也会显示这个次要的yAxis标签。

我是不是遗漏了什么简单的东西来让它工作？

谢谢！！

Answer 1

既然你没有自己的解决方案，这是我自己的解决方案，这可能更糟糕，但你至少不需要指定轴的位置(某种程度上)。

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

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

$(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]

        }]
    });
});

请参阅fiddle http://jsfiddle.net/r2etx98t/

Answer 2

最后，我使用以下代码手动定位文本

请参见working http://jsfiddle.net/0s17qt56/4/

摘录如下

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