我正在尝试在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]
}
]
最佳答案
使用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/