高图绘制区域上方使用DOM的图线

时间:2019-02-28 15:06:38

标签: javascript html highcharts

我希望绘图线被渲染到最后(现在区域正在覆盖它们)。如果我使用Zindex宽度增加并且看起来不那么整齐,我也尝试使用线宽。 我对标记位于绘图线上方进行了此方法,但对区域上方的绘图线不起作用。我做错什么了吗?

componentDidRender() {
if(this.shadowRoot) {
var markers0 = this.shadowRoot.querySelector('.highcharts-markers.highcharts-series-0');
  var plotLines0 = this.shadowRoot.querySelector('.highcharts-plot-lines-4');
  var area0 = this.shadowRoot.querySelector('.highcharts-area-series');

/// plotlines below markers - works
  if(plotLines0 && plotLines0.parentNode && markers0)
     plotLines0.parentNode.insertBefore(markers0, plotLines0.nextSibling);

// markers below area - works 
 // markers0.parentNode.insertBefore(area0, markers0.nextSibling);

//area below plotlines- doesnt work
  //if(area0 && area0.parentNode && plotLines0)
  //area0.parentNode.insertBefore(plotLines0, area0.nextSibling);

如果我在绘图线以下的区域运行该代码,则没有任何变化。

1 个答案:

答案 0 :(得分:1)

您可以通过以下方法删除倒数第二个网格线:

chart: {
    events: {
        load: function() {
            var prevTick;

            Highcharts.objectEach(this.yAxis[0].ticks, function(tick) {
                if (tick.isLast) {
                    prevTick.gridLine.destroy();
                }

                prevTick = tick;
            });
        }
    }
},

实时演示:http://jsfiddle.net/BlackLabel/obam5yxg/