我们可以在高图线形图中找到故障点/故障分析吗？ [英] Can we find breakdown point/ break down analysis in High chart line graph?

问题描述

我想要一张像这样的图像。我已经尝试使用高图表来创建这个图表，但是我无法计算中断点（两个线图相互碰撞的地方）。有没有人知道如何做到这一点，如下图所示：

Highcharts.chart（'container1'，{图表：{type：'column'}，credits：{enabled：false}，legend：{align：'right'，verticalAlign：'top'，layout：'vertical'，x：0，y：100} {text：'现金流分析与分解'，对齐：'left'，x：0，style：{color：'＃000000'，fontWeight：'no rmal'，textTransform：'Uppercase'，fontSize：'14px'，}}，xAxis：{categories：['Year 0'，'Year 1'，'Year 2'，'Year 3'，'Year 4'，'年'5']，lineColor：'＃000000'，lineWidth：2}，yAxis：{min：0，tickInterval：50，title：{text：''，gridLineWidth：0，lineColor：'#cccccc'，lineWidth： 1}，tooltip：{pointFormat：'< span style =color：{series.color}> {series.name}< / span>：< b> {point.y}< / b> （{point.percentage：.0f}％）< br />'，shared：true}，plotOptions：{column：{stacking：'normal'}，bar：{groupPadding：0.1，pointWidth：20，}，系列：{pointWidth：40}}，系列：[{name：'Benifit（一次）'，数据：[0,50,60,80,50,60]，颜色：'＃005998'}，{name： 'Benifit（Recurring）'，数据：[0,150,150,180,120,140]，颜色：'＃0FAAFF'}，{type：'line'，name：'Cost'，data：[35,15,25 ，14,10,7]，颜色：'＃E35500'，标记：{lineWidth：2，lineColor：'＃E35500'，fillColor：'＃E35500'}}，{type：'line'，name：'现金流量'，data：[-50,180,170,220,160,190]，颜色：'＃FFC000'，标记：{lineWidth：2，lineColor：'#F FC000'，fillColor：'＃FFC000'}}]}）;

 < script src =http://code.highcharts.com/highcharts.js>< / script>< script src =https://ajax.googleapis.com/ajax/libs/ jquery / 2.1.1 / jquery.min.js>< / script>< div id =container1>< / div>  

您需要找到该系列的交点 - 并且您可以绘制坐标来绘制一条线（带箭头的行）和文本 - 都可以使用

I want a graph like this image. I have tried making this using high chart , But I am unable to calculate break point (the point where 2 line graphs are colliding. Does anyone know how to do that , like the image below.

    
Highcharts.chart('container1', {
    chart: {
        type: 'column'
    },
     credits: {
        enabled: false
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 100
    },
    title: {
        text: 'Cash Flow Analysis and Breakdown',
         align: 'left',
        x: 0,
        style: {
            color: '#000000',
            fontWeight: 'normal',
            textTransform : 'Uppercase',
            fontSize : '14px',
        }
    },
    xAxis: {
        categories: ['Year 0', 'Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
        lineColor: '#000000',
        lineWidth: 2
    },
    yAxis: {
        min: 0,
        tickInterval: 50,
        title: {
            text: ''
        },
        gridLineWidth : 0,
        lineColor: '#cccccc',
        lineWidth: 1
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        },
        bar:{
            groupPadding:0.1,
                  pointWidth:20,
        },
        series:{
             pointWidth: 40
        }
        
    },
    series: [{
         
        name: 'Benifit(One time)',
        data: [0,50, 60, 80, 50, 60],
        color: '#005998'
    },{
        
        name: 'Benifit(Recurring)',
        data: [0,150, 150, 180, 120, 140],
        color: '#0FAAFF'
    }, {
        type: 'line',
        name: 'Cost',
        data: [35, 15, 25, 14, 10, 7],
        color: '#E35500',
        marker: {
            lineWidth: 2,
            lineColor: '#E35500',
            fillColor: '#E35500'
        }
    },{
        type: 'line',
        name: 'Cash Flow',
        data: [-50, 180, 170, 220, 160, 190],
        color: '#FFC000',
        marker: {
            lineWidth: 2,
            lineColor: '#FFC000',
            fillColor: '#FFC000'
        }
       
    }
            ]
});

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1"></div>

解决方案

You need to find the intersection points of the series - and having coordinates you can plot a line (line with an arrow) and a text - both can be rendered with Renderer.

  chart: {
    type: 'column',
    events: {
      load: function() {
        const points1 = this.series[2].points;
        const points2 = this.series[3].points;

        const intersection = [];

        for (let i = 1; i < points1.length; i++) {
          const intersect = getLineIntersection(points1[i - 1], points1[i], points2[i - 1], points2[i]);

          if (intersect) {
            intersection.push(intersect);
          }
        }

        const xAxis = this.xAxis[0];
        const yAxis = this.yAxis[0];

        intersection.forEach(coord => {
          const text = this.renderer.text('break point', -999, -999).add();
          const anchorX = xAxis.toPixels(coord[0]);
          const anchorY = yAxis.toPixels(coord[1]);

          const connector = this.renderer.path([
            'M', anchorX, anchorY,
            'L', anchorX - 5, anchorY - 100
          ]).attr({
            stroke: 'black',
            'stroke-width': 1,
            zIndex: 99
          }).add();


          text.attr({
            align: 'center',
            x: anchorX - 5,
            y: anchorY - 110,
            zIndex: 99
          }).css({
            color: 'black',
            fontSize: '14px',
            fontWeight: 'bold'
          });
        })
      }
    }
  },

Live example and output

https://jsfiddle.net/858b4x0c/

这篇关于我们可以在高图线形图中找到故障点/故障分析吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！