Высокие диаграммы zIndex dataLabel против renderer.rect против подсказки - PullRequest
0 голосов
/ 22 октября 2018

Я изо всех сил пытаюсь получить элементы диаграммы в правильном Z-порядке, в частности там, где у меня есть dataLabels с включенным useHTML, и где я также добавляю прямоугольник через chart.renderer.rect().Это показано в следующем jsfiddle:

https://jsfiddle.net/fk7b3cnz/

Я хочу, чтобы прямоугольник был над основными элементами диаграммы (линии, метки), а всплывающая подсказка была над прямоугольником (т.е. превыше всего).Мне удалось заставить всплывающую подсказку располагаться сверху ( за исключением поля вокруг нее ... как это исправить? ), но метки данных находятся над прямоугольником ... установленный zIndexпоскольку прямоугольник, кажется, не имеет никакого эффекта.

JAVASCRIPT:

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    tooltip: {
      useHTML: true,
      formatter: function () {
        return '<div class="tooltip">value: ' + this.y + '</div>';
      }
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                useHTML: true // need this to achieve the text formatting I want via appropriate html (not shown here)
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function (chart) { // on complete

    chart.renderer.rect(100, 100, 100, 100, 5)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow',
            zIndex: 9998 // want this to be above chart features but below tooltip
        })
        .add();

});

CSS:

.highcharts-tooltip span {
    background-color: white;
    border: 1px solid green;
    opacity: 1;
    z-index: 9999;
}

.tooltip {
    padding: 5px;
}

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

1 Ответ

0 голосов
/ 22 октября 2018

Вместо добавления zIndex вручную вы можете использовать метод Highcharts.SVGElement.toFront .Прямоугольник будет нанесен над линиями и другими элементами SVG.Однако метки данных, созданные с использованием HTML, всегда будут выше других элементов SVG (поскольку всплывающая подсказка Highcharts v6.1.1 может отображаться над содержимым HTML), как вы можете прочитать в документации Highcharts :

"Он всегда будет располагаться поверх всего остального содержимого SVG. В частности, всплывающая подсказка может отображаться ниже метки useHTML. Начиная с Highcharts v6.1.1 этого можно избежать, задав для tooltip.outside значение true."

chart.renderer.rect(100, 100, 100, 100, 5)
   .attr({
     'stroke-width': 2,
     stroke: 'red',
     fill: 'yellow'
   })
   .add()
   .toFront();

Демонстрация: jsfiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...