Highcharts: провести линию от маркера к оси? - PullRequest
Новая
       7

Highcharts: провести линию от маркера к оси?

1 голос
/ 10 июля 2020

Я разрабатываю приложение с использованием angular и очень плохо знаком с такими высокими диаграммами. У меня есть требование, где мы должны нарисовать линию сетки от маркера к оси (как я указал розовыми стрелками в приложении). здесь код: 

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
.highcharts-xaxis-grid .highcharts-grid-line {
      stroke-width: 4px;
      stroke: #f2f2f2;
    }
   
   
   .highcharts-yaxis-grid .highcharts-grid-line {
      stroke-width: 2px;
      stroke: none;
    }
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

- существующий код. Может ли кто-нибудь помочь мне в этом. Заранее спасибо.

введите описание изображения здесь

1 Ответ

2 голосов
/ 10 июля 2020

Вы можете добиться чего-то подобного на изображении выше, отрисовав пользовательские пути из каждой точки.

Демо: https://jsfiddle.net/BlackLabel/3og8w7cv/

  chart: {
    events: {
      render() {
        let chart = this;
                
        chart.series[0].points.forEach(p => {
                    let x = p.plotX + chart.plotLeft,
                            y = p.plotY + chart.plotTop;
                    
                    if (p.customPath) {
                        p.customPath.destroy();
                    }
                    
          p.customPath = chart.renderer.path(['M', x, y, 'L', x, chart.plotSizeY + chart.plotTop])
            .attr({
              'stroke-width': 2,
              stroke: 'red'
            })
            .add();
        })
      }
    }
  },

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

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

...