我正在尝试在Highcharts中制作此组合图:

javascript -  Highcharts :从数据标记画一条线到轴?-LMLPHP

所以我想知道如何从数据点到轴画虚线。

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/

javascript -  Highcharts :从数据标记画一条线到轴?-LMLPHP

10-05 20:44
查看更多