用隱藏軸顯示高位地圖的情節線？

Question

即使關聯的軸有visible: false，是否有方法顯示繪圖？隱藏軸似乎也隱藏了情節。

更多詳細信息...

我畫了一天的圖，像這樣：

我只是想增加在特定時間的垂直線，線「現在」時間等

如果我這樣做，用的情節線，則軸顯示了太多：

我絕對不希望軸顯示。

我現在的計劃是使用render.rect或render.path在圖表上繪製我自己的線。還有其他選擇嗎？

Answer 1

我找到了一個相對平凡解...只是用CSS隱藏：

.highcharts-xaxis { 
    display: none; 
} 

和JS：

xAxis: { 
    type: 'datetime', 
    labels:{ 
     enabled: false 
    } 
} 

Answer 2

您可以通過包裝負責重繪軸的方法extend Highcharts。

Highcharts.wrap(Highcharts.Axis.prototype, 'redraw', function(p) { 
p.call(this); 
console.log(this); 
var axis = this, 
    each = Highcharts.each, 
    options = this.options; 
// move plot lines and bands 
if (!axis._addedPlotLB) { // only first time 
    each((options.plotLines || []), function(plotLineOptions) { 
    axis.addPlotBandOrLine(plotLineOptions); 
    }); 
    axis._addedPlotLB = true; 
} 

each(this.plotLinesAndBands, function(plotLine) { 
    plotLine.render(); 
}); 
}); 

例如：http://jsfiddle.net/ncs81btt/

上面的解決方案是不是很優雅，雖然。更好的方法是使用Renderer或隱藏特定的軸元素（標籤，刻度等）。

根據你需要的情節線功能，使用渲染器需要做一些計算。

var customPlotLines = [{ 
    value: 5, 
    color: 'red', 
    width: 3 
    }, { 
    value: 10, 
    color: 'yellow', 
    width: 3 
    }] 

function renderPlotLines() { 
var axis = this.xAxis[0], 
    top = axis.chart.plotTop, 
    bottom = top + axis.chart.plotHeight, 
    path = [ 
     'M', null, top, 
     'L', null, bottom 
    ]; 

if (!this.customPlotLines) { 
    this.customPlotLines = customPlotLines.map(plotLine => { 
    return this.renderer.path([]).add(); 
    }); 
} 

this.customPlotLines.forEach((plotLine, i) => { 
    var opt = customPlotLines[i]; 
    path[4] = path[1] = axis.toPixels(opt.value); 
    plotLine.attr({ 
    d: path.join(' '), 
    'stroke-width': opt.width, 
    stroke: opt.color 
    }); 
}); 
} 

掛鉤加載/重繪事件，所以元素將調整大小。

chart: { 
    zoomType: 'xy', 
    events: { 
    load: renderPlotLines, 
    redraw: renderPlotLines 
    } 
}, 

例如：http://jsfiddle.net/ncs81btt/1/