ハイチャート：データマーカーから軸へ線を引く？

Question

私はHighchartsで、この複合グラフを作成しようとしている：

だから私は軸に外のデータポイントからその破線を描画する方法を思ったんだけど。

Y-Axisはパーセントで、​​は日付です。

現在、私はスプライン・チャート、エリア・チャート、スタック・カラム・チャートを組み合わせています。 、開始中間点と停止 - の3点を持っているSVGパスを作成するために

series: [{ 
    type: 'spline', 
    name: 'Average', 
    data: [0, 50, 85, 95, 95, 95, 97], 
    dashStyle: 'shortdash', 
    marker: { 
     radius: 8, 
     lineWidth: 2, 
     lineColor: 'skyblue', 
     fillColor: 'white', 
     symbol: 'triangle' 
    } 
    }, 
    { 
    type: 'area', 
    name: ' ', 
    color: '#D8E1E8', 
    data: [0, 0, 15, 25, 25], 
    marker: { 
     radius: 8, 
     fillColor: 'skyblue', 
     symbol: 'triangle' 
    } 
    }, 

    { 
    type: 'area', 
    name: ' ', 
    color: '#FFFFCB', 
    data: [0, 0, 15, 15, 15], 
    marker: { 
     radius: 1, 
    }, 
    dataLabels: { 
     enabled: false 
    } 
    }, 
    { 
    type: 'area', 
    name: ' ', 
    color: '#B5E9FF', 
    data: [0, 50, 55, 55, 55], 
    marker: { 
     radius: 1, 
    }, 

    }, 
    { 
    name: 'John', 
    color: '#990000', 
    data: [0, 13, 0] 
    }, { 
    name: 'Jane', 
    color: '#FFB900', 
    data: [0, 12, 0] 
    }, { 
    name: 'Joe', 
    color: '#647D2D', 
    data: [0, 24, 0] 
    } 
] 

Answer 1

使用renderer.path：

マイ系列データは、現在、次のようになります。

パスを作成するための機能：

function drawDashLine (chart, point, dashLine) { 
    const xAxis = chart.xAxis[0] 
    const yAxis = chart.yAxis[0] 

    const x = Math.round(xAxis.toPixels(point[0])) 
    const y = Math.round(yAxis.toPixels(point[1])) 
    const d = ['M', xAxis.left, y, 'L', x, y, 'L', x, yAxis.top + yAxis.height] 

    return dashLine 
    ? dashLine.attr({ d }) 
    : chart.renderer.path(d).attr({ 'stroke-dasharray': '3,1', 'stroke': 'skyblue', 'stroke-width': 2, zIndex: 1 }).add() 
} 

コール負荷に機能 - ラインを作成し、上のラインの位置を再計算するために再描画します。

chart: { 
    events: { 
     load: function() { 
     this.dashLines = dashLines.map(point => drawDashLine(this, point)) 
     }, 
     redraw: function() { 
     this.dashLines.forEach((line, i) => drawDashLine(this, dashLines[i], line)) 
     } 
    } 
    }, 

ライブ例：https://jsfiddle.net/em7e9o2t/