Question

是否可以像下面的图表一样创建图表，而对于折线图却无法执行。请建议

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

Answer 2

尝试以下链接中提供的highchart版本。这可能会达到您的目的。

https://www.highcharts.com/demo/combo-dual-axes/grid-light

Highchart-双轴折线图问题

2 个答案: