如何在 Highcharts 中将文本添加到图表中

Question

我正在使用 highcharts，我想获得您可以在下面看到的相同图表（负条）。你可以看到我所拥有的代码。如何在最后一个栏的一侧添加灰色文本？ （浅绿色条）。我也想摆脱我在第二个栏中得到的 0%。提前致谢。

$(function () {
    $('#emmisions2015_2050').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: ''
        },

        xAxis: {
            opposite: true,
            categories: ['Transport', 'Purchased Electricity', 'Direct Emissions']
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    align: 'right',
                    style: {
                        textOutline: false 
                    },
                     borderWidth: 1,
                     formatter: function() {
                       if (this.point.isInside == true) {
                         return '<span style="color: white">' + this.y + '%</span>';
                       } else {
                         return '<span style="color: black">' + this.y + '%</span>';
                       }
                     }
                }
            },
            column: {
                stacking: 'normal',
                format: '{point.x:.1f} Billion Euro'
            }
        },

        series: [{
            name: 'Emerging & Breakthrough',
            data: [0, 0, { y: -5, color: '#8cc640'}]
        },{
            name: 'Demand-side Flexibility',
            data: [0, 0, { y: -2, color: '#8cc640'}]
        },{
            name: 'Fuel Switch',
            data: [0, 0, { y: -8, color: '#8cc640'}]
        },{
            name: 'Energy Efficiency',
            data: [{ y: -4, color: '#51a332'},{ y: -11, color: '#26b6cc'},{ y: -7, color: '#8cc640'}]
        }]
    });
});

#emmisions2015_2050 .highcharts-legend{
    display: none;
}
.highcharts-button, .highcharts-axis, .highcharts-credits{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="emisions" id="emmisions2015_2050"></div>

Answer 1

您可以删除 0 并为这些点设置 x 属性 - 它会删除不必要的标签。

name: 'Emerging & Breakthrough',
data: [{
  x: 2,
  y: -5,
  color: '#8cc640'
}]

您可以在右侧添加文本作为绘图线标签，请参阅plotLines.label。

您不应该通过 CSS 隐藏元素，而是使用 Highcharts API，例如学分，图例可以通过enabled: false属性禁用。

实时示例和输出

https://jsfiddle.net/bb83jw29/

Answer 2

您可以通过在图表中添加相反的 yAxis 并创建一些函数来实现此效果，该函数定义标签在该轴上的外观以及它们将从何处命名。看看下面的代码：

var tickPositions = [-19, -16, -12, -4],   // Define here positions of labels (position point can't be equal than extreme points of axis)
    extremes = chart.yAxis[0].getExtremes(),
    counter = 0,

createTicks = function(ticks, axisExtremes) {
    var ticksArray = [axisExtremes.min, ...ticks, axisExtremes.max];
    return ticksArray;
    };

chart.yAxis[1].setExtremes(extremes.min ,extremes.max);

chart.yAxis[1].update({
    tickPositions: createTicks(tickPositions, extremes),
labels: {
    formatter: function() {

        if(this.value === extremes.min) {
            return;
        } else if(counter < tickPositions.length) {
            return this.chart.series[counter++].name;
        } else if(this.value === extremes.max) {
            counter = 0
            return;
        }

    },
    style: {
        "color": "#aaa",
        "font-weight": "bold"
    }
}

})

如果你想看看它是如何现场工作的，这里是JSFiddle