高图表根据负/正值添加 yAxis 标签

highcharts add yAxis label based on negative/positive value

本文关键字：添加 yAxis 标签 高图表      更新时间：2023-09-26

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

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

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

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

 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 标签。

我缺少一些简单的东西来完成这项工作吗？

谢谢！！

由于您没有自己的解决方案，这是我自己的肮脏的黑客解决方案，它可能更糟，但您至少不需要指定轴的位置（有点）。

这个想法是添加一个没有名称的额外类别，添加另一个具有 2 个点的系列，该类别的 x 值和名称为"导入"和"导出"。

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

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

我最终使用以下方法来手动定位文本

查看工作 http://jsfiddle.net/0s17qt56/4/

摘录如下

labels: {
      items : [{
         html : 'Imports',
         style : {
           left: '710px',
           top : '130px'
         }
       },{
         html : 'Exports',
         style : {
           left: '710px',
           top : '70px'
         }
       }]
    },
相关文章：