当值低于上一个时，是否有办法在highchart中动态创建绘图线? [英] Is there a way how to dynamically create a plotline in highchart when the value is lower than previous one?

问题描述

我想问一下你们中是否有人有自动生成的情节线的经验，以防出现某些情况".

我已将Highchart连接到SQL Server，从那里我可以读取yAxis的数字(电阻)和xAxis的日期时间.一切工作正常，但是我想每次在阻力值下降至少30％时绘制一条情节图.

因此，主要问题是如何创建条件(在javascript/mssql/php ...中)，该条件将比较当前行值与上一个行值，并在情况变低时自动创建绘图线./p>

我希望以某种方式有意义.预先感谢您的任何想法.

代码正在运行，我可以在图表中看到所需的值.大约没有错误消息，只是试图找到一种动态绘图线的方法.

在此先感谢您的推荐.

以下是用于与SQL Server连接的php函数:

function GetAvg2($connection, $column, $Zone, $Table, $dodatek="")
{
    $sql="SELECT concat(datediff(second,{d '1970-01-01'},dateadd(month,datediff(month, 0,date),0)),'000') as datumek, avg($column) as column_set FROM $Table WHERE FileName = '$Zone' and R_TOP1 is not NULL $dodatek group by dateadd(month,datediff(month, 0,date),0)";
    $data=array();
    $result = sqlsrv_query($connection, $sql);
    while( $row = sqlsrv_fetch_array( $result, SQLSRV_FETCH_ASSOC) ) 
    {
        $data[]="[".$row['datumek'].",".number_format($row['column_set'],2,'.','')."]";
    }
    return implode(",",$data);  
}

解决方案

在load图表事件中，您可以遍历点并动态添加一些绘图线.例如:

chart: {
    events: {
        load: function() {
            var points = this.series[0].points,
                value = 4,
                closed = true,
                plotLines = [];

            points.forEach(function(p) {
                if (closed ? p.y >= value : p.y <= value) {
                    closed = !closed;
                    plotLines.push({
                        value: p.x,
                        color: 'red',
                        width: 2
                    });
                }
            });

            this.xAxis[0].update({
                plotLines: plotLines
            });
        }
    }
}

---

实时演示: http://jsfiddle.net/BlackLabel/wngo4k1s/

API参考:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts .Axis#update

I would like to ask if any of you already has experience with automatically generated plotline in case that "some condition".

I have highchart connected to SQL Server from where I am reading numbers (of resistance) to yAxis and datetime for xAxis. Everything is working properly but I would like to put a plotline every time when the value of resistance is going let's say at least 30% down.

So the main question is how to create a condition (in javascript/mssql/php...) which will be comparing current row value with the previous one and in case it will be lower will be automatically created a plotline.

I hope it make sense somehow. Thank you in advance for any ideas.

The code is working, I can see the values which I need in chart. No error messages or so, just trying to find a way for dynamic plotline.

Thank you in advance for any recommendation.

Here is a php function for connection with SQL Server:

function GetAvg2($connection, $column, $Zone, $Table, $dodatek="")
{
    $sql="SELECT concat(datediff(second,{d '1970-01-01'},dateadd(month,datediff(month, 0,date),0)),'000') as datumek, avg($column) as column_set FROM $Table WHERE FileName = '$Zone' and R_TOP1 is not NULL $dodatek group by dateadd(month,datediff(month, 0,date),0)";
    $data=array();
    $result = sqlsrv_query($connection, $sql);
    while( $row = sqlsrv_fetch_array( $result, SQLSRV_FETCH_ASSOC) ) 
    {
        $data[]="[".$row['datumek'].",".number_format($row['column_set'],2,'.','')."]";
    }
    return implode(",",$data);  
}

解决方案

In load chart event you can loop through points and add some plot lines dynamically. For example:

chart: {
    events: {
        load: function() {
            var points = this.series[0].points,
                value = 4,
                closed = true,
                plotLines = [];

            points.forEach(function(p) {
                if (closed ? p.y >= value : p.y <= value) {
                    closed = !closed;
                    plotLines.push({
                        value: p.x,
                        color: 'red',
                        width: 2
                    });
                }
            });

            this.xAxis[0].update({
                plotLines: plotLines
            });
        }
    }
}

---

Live demo: http://jsfiddle.net/BlackLabel/wngo4k1s/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Axis#update

这篇关于当值低于上一个时，是否有办法在highchart中动态创建绘图线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！