标注文本高图对齐问题

Question

我试图在我的Highcharts上显示标注并注意到一些对齐问题。

没有CSS它运行良好，但是当我添加CSS时它看起来不太好。

这是我的内容 -

没有CSS实现 - 其中renderer.label useHTML设置为false。

HTML代码： -

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div class="container-fluid">



<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>

CSS： -

body {
  font-family: Helvetica;
  font-size: 13px;
}

div.callout {
  height: 20px;
  width: 100px;
  /*float: left;*/
  z-index: 1;
}

div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  margin: 25px;
  min-height: 20px;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.top::before {
  /*left: 45%;*/
  bottom: -20px;
  border-top: 11px solid #444;
}

.callout.bottom::before {
  /*left: 45%;*/
  top: -20px;
  border-bottom: 10px solid #444;
}

.callout.left::before {
  right: -20px;
  top: 40%;
  border-left: 10px solid #444;
}

.callout.right::before {
  /*left: -20px;*/
  top: 40%;
  border-right: 10px solid #444;
}

.callout.top-left::before {
  /*left: 7px;*/
  bottom: -20px;
  border-top: 10px solid #444;
}

.callout.top-right::before {
  /*right: 7px;*/
  bottom: -20px;
  border-top: 10px solid #444;
}

Jquery： -

    $(function() {
            categories = ["09/07/2016 00:00","09/07/2016 00:01","09/07/2016 00:02","09/07/2016 00:03","09/07/2016 00:04"]
            rate_1 = [0.8,0.54,0.6,0.3,0.4]
            rate_2 = [0.33,0.16,0.33,0.3,0.38]
            rate_3 = [0.03,0.04,0.05,0.03,0.01]

    var addCallout = function(chart) {
    $('.dL').remove();
            var xAxis = chart.xAxis[0],
            yAxis = chart.yAxis[0],

            series = chart.series[0],
            point = series.data[0]; 
            console.log('xAxis == ', xAxis)
            console.log('yAxis == ', yAxis.toPixels)
            console.log('series == ', series)
            console.log('point == ', point)       
            console.log(point.plotY)
            console.log(point.plotX)

             var a = chart.renderer.label('<div class="callout top">This is the callout text!</div>',  point.plotX + chart.plotLeft + 10, 
                point.plotY + chart.plotTop - 20, 'callout',null, null, true).add();

            console.log('a',a);
    };

        $('#container').highcharts({
            chart: {
  // type: 'bar',
  events: {
    load: function() {          
      addCallout(this);
    },
    redraw: function() {
      addCallout(this);
    },
  }
},
            title: {
                text: 'Spikes Graph',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            }
            ,
             events: {
                load: function() {                          

                // addCallout(this);
            },
                redraw: function() {
                addCallout(this);
            },
            }
            ,
            series: [{
                turboThreshold: 2000 // to accept point object configuration
            }],
            xAxis: {
                categories: categories,
                tickInterval: 60,
            },
            yAxis: {
                title: {
                    text: 'Error Rate'
                },
                min: 0,
                max: 5,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }],
                labels:{
                    format : '{value} %'
                }
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [
                // {turboThreshold: 2000 },
                {
                    name: 'Rate-1',
                    data: rate_1,
                    turboThreshold: 2000,
                    lineWidth: 1,
                    dataLabels: {
                    enabled: true,
                    useHTML: true,                        
                    style: {
                        fontWeight: 'bold'
                    },                        
                },
                }, {
                    name: 'Rate-2',
                    data: rate_2,
                    turboThreshold: 2000,
                    lineWidth: 1
                }, {
                    name: 'Rate-3',
                    data: rate_3,
                    turboThreshold: 2000,
                    lineWidth: 1
                }

            ]
        });
    });

https://jsfiddle.net/4qbhjt72/

使用CSS实现 - 其中renderer.label useHTML设置为true。

https://jsfiddle.net/4qbhjt72/1/