angular - Highchart - 双轴折线图问题

Question

是否可以创建如下图的图表，我无法为折线图创建图表。请建议

标签： angularhighchartsangular2-highcharts

Answer 1

这种类型的系列在 Highcharts 中不存在，但您应该能够通过渲染虚拟系列来创建类似的东西，并使用该SVGRenderer工具在其上渲染自定义线条。

演示：https ://jsfiddle.net/BlackLabel/rq5b2os1/

  chart: {
    events: {
      render() {
        let chart = this,
          pointWidth = chart.series[0].points[0].pointWidth,
          pointDistance = chart.series[0].points[1].plotX - chart.series[0].points[0].plotX;

        chart.series[1].points.forEach((p, i) => {
          let x = p.plotX + chart.plotLeft,
            y = p.plotY + chart.plotTop;

                    // keep chart responsive
          if (p.customPoint) {
            p.customPoint.destroy();
          }

                    // render point on the column
          p.customPoint = chart.renderer.path(['M', x - pointWidth / 2, y, 'L', x + pointWidth / 2, y])
            .attr({
              'stroke-width': 4,
              stroke: 'black',
              zIndex: 20
            })
            .add();

          if (chart.series[1].points[i + 1]) {
            let nextPoint = chart.series[1].points[i + 1];

                        // keep chart responsive
            if (p.customLine) {
              p.customLine.destroy();
            }

                        // render line between custom points
            p.customLine = chart.renderer.path(['M', x + pointWidth / 2, y, 'L', x + pointDistance / 2, y, x + pointDistance / 2, nextPoint.plotY + chart.plotTop, x + pointDistance, nextPoint.plotY + chart.plotTop])
              .attr({
                'stroke-width': 1,
                stroke: 'black',
                zIndex: 20
              })
              .add();
          }
        })
      }
    }
  },

API：https ://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

API：https ://api.highcharts.com/highstock/chart.events.render