javascript - 当值低于前一个值时，有没有办法在 Highcharts 中动态创建情节线？

Question

我想问一下你们中是否有人已经有过在“某些情况”的情况下自动生成情节的经验。

我将 highchart 连接到 SQL Server，从那里我正在读取 yAxis 的(阻力)数字和 xAxis 的日期时间。一切都在正常工作，但我想每次阻力值下降时都画一条情节线，比如说至少下降 30%。

因此，主要问题是如何创建一个条件(在 javascript/mssql/php 中...)，它将当前行值与前一个行值进行比较，如果它会更低，将自动创建一个情节线。

我希望它能以某种方式说得通。提前感谢您的任何想法。

代码运行正常，我可以在图表中看到我需要的值。没有错误消息，只是想找到一种动态情节的方法。

提前感谢您的任何建议。

这是一个用于连接 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);  
}

Answer 1

在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