하이 차트 : 데이터 마커에서 축으로 선을 그립니까?

Question

나는 Highcharts이 조합 차트를 만들려고 노력 해요 :

그래서 나는 데이터가 축 지적에서 그 점선을 그리는 방법을 궁금하네요.

Y-Axis은 백분율이며 X-axis은 날짜입니다.

현재 스플라인 차트, 영역 차트 및 누적 세로 막 대형 차트를 결합합니다.

내 일련의 데이터는 현재 다음과 같습니다

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 3 점이있는 SVG 경로 생성 - 시작, 중간 지점 및 중지합니다.

경로를 생성하는 함수 :

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/