Question

对于我的图表，我想在图表上绝对定位一个元素，但在堆叠方面的工具提示下，这是否可能？

示例：http://jsfiddle.net/0vdnrm26/1/， Asia上的最终工具提示与hello world div重叠，理想情况下工具提示会超过hello world。

Answer 1

正是这样发生因为div的绝对位置，它与highcharts无关。 Highcharts图表是svg元素，并在之后呈现。

您可以使用SVGRenderer#text来完成同样的事情。

＆＃13;

var chart = new Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'Historic and Estimated Worldwide Population Growth by Region'
  },
  subtitle: {
    text: 'Source: Wikipedia.org'
  },
  xAxis: {
    categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    tickmarkPlacement: 'on',
    title: {
      enabled: false
    }
  },
  yAxis: {
    title: {
      text: 'Billions'
    },
    labels: {
      formatter: function() {
        return this.value / 1000;
      }
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: '#666666',
      lineWidth: 1,
      marker: {
        lineWidth: 1,
        lineColor: '#666666'
      }
    }
  },
  series: [{
    name: 'Asia',
    data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
    name: 'Africa',
    data: [106, 107, 111, 133, 221, 767, 1766]
  }, {
    name: 'Europe',
    data: [163, 203, 276, 408, 547, 729, 628]
  }, {
    name: 'America',
    data: [18, 31, 54, 156, 339, 818, 1201]
  }, {
    name: 'Oceania',
    data: [2, 2, 2, 6, 13, 30, 46]
  }]
}, function(chart) { // on complete
  var width = chart.chartWidth - 70;
  chart.renderer.text('Hello World', width, 50)
    .attr({
      //stroke: 'black',
    })
    .add();

});

＆＃13;

.wrapper {
  position: relative;
}

/*.some-div {
  position: absolute;
  top: 50px;
  right: 0;
  background: pink;
}*/

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="wrapper">
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
  <!--<div class="some-div">
    hello world
  </div>-->
</div>

＆＃13;

Fiddle演示

Highcharts工具提示由绝对定位元素重叠

1 个答案: