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/

Highcharts：从数据标记到轴绘制线条？

1 个答案: