Wie in Highcharts horizontale Linien über die einige Spalten von columnrange Diagramm plotten

Question

ich auf einem columnrange Graph in Highcharts arbeite, wo ich verschiedene Messungen und Konfidenzintervall in der gleichen Parzelle Grundstück:

Die ersten paar Spalten innerhalb Eine Gruppe (z. B. Januar) repräsentiert Messungen für verschiedene Städte, während die letzte Spalte Konfidenzintervalle darstellt. Ich würde gerne horizontale Linien zu den Konfidenzintervallen hinzufügen, die die Datenmittel darstellen. Das heißt, jede orange Spalte würde ihre eigene Zeile mit einer bestimmten Höhe erhalten, die von der linken zur rechten Seite des orangefarbenen Rechtecks ​​geht. Wie zeichne ich solche Linien?

Ich weiß, wie Sie Zeilen als separate Serie des Typs line hinzufügen. Allerdings bin ich mir nicht sicher, wie ich die genaue Position der orangefarbenen Spalte erraten soll. Außerdem weiß ich nicht, wie mit Fällen verfahren wird, in denen einige Spalten in der Legende versteckt sind.

Diese Frage bezieht sich auf this question, aber ich kann keine dieser Lösungen in meinem Fall funktionieren. Hier

ist die Geige: https://jsfiddle.net/nikicc/rqxqm4hm/

Answer 1

Sie können renderer.path verwenden richtigen Linien zu zeichnen.

function drawDataMeans() { 
    const intervalSeries = this.get('conf-interval'), 
     series = this.series.filter(series => intervalSeries !== series) 

    let lines = this.dataMeansLines 

    if (!lines) { 
    lines = this.dataMeansLines = series[0].data.map(series => this.renderer.path().attr({ 
     'stroke-width': 2, 
     stroke: 'black' 
    }).add(intervalSeries.group)) 
    } 

    const visibleSeries = series.filter(series => series.visible) 

    if (intervalSeries.visible && visibleSeries.length) { 
    intervalSeries.data.forEach((point, i) => { 
     const mean = visibleSeries.reduce((sum, series) => sum + series.data[i].high, 0)/visibleSeries.length 
     const {x, width} = point.shapeArgs 
     const y = this.yAxis[0].toPixels(mean, true) 

     lines[i].attr({ 
     d: `M ${x} ${y} L ${x + width} ${y}`, 
     visibility: 'visible' 
     }) 
    }) 
    } else { 
    lines.forEach(line => line.attr({visibility: 'hidden'})) 
    } 
} 

Haken auf Last/Ereignisse

chart: { 
    type: 'columnrange', 
    inverted: false, 
    events: { 
    load: drawDataMeans, 
    redraw: drawDataMeans 
    } 
}, 

Beispiel neu zu zeichnen: https://jsfiddle.net/dq48sq3w/