Highchart - проблема с линейным графиком с двумя осями - PullRequest
Новая
       73

Highchart - проблема с линейным графиком с двумя осями

0 голосов
/ 17 июня 2020

i

Можно ли создать диаграмму, как на диаграмме ниже, я не могу сделать это для линейной диаграммы. Пожалуйста, предложите

Ответы [ 2 ]

1 голос
/ 17 июня 2020

Этот тип серий не существует в 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

0 голосов
/ 17 июня 2020

Попробуйте версию highchart, указанную по ссылке ниже. Это может служить вашей цели ..

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

...