0

我正在使用 Highcharts 样条图从 MySQL DB 中动态绘制数据。

图表显示网站的响应时间，其中也考虑了网站的 http 状态代码。

每当 http 状态代码为 500、404、400（例如）时，图表以红色显示，当 http 状态代码更改为其他任何内容（例如 200）时，以蓝色显示。

图表从 DB 过去 10 分钟的数据开始，每分钟通过 AJAX 调用获取数据并动态绘制。

Graph color changes to red but continues plotting with the same colour even when it gets status code not in http_code_arr[].

<script>

function requestData() 
{
    $.ajax({
        url: 'get_hourly_data.php',
        type: "GET",
        datatype: "json",
        data: 'site_id=' + site_id,
        success: function(data) 
        {   console.log(data); (Posted below)
            var http_code_arr = [500,404,400];
            for($i=0;$i<data.length;$i++)
            {
                         // Change color of chart to red whenever http_code (data[$i][2]) is mentioned in http_code_arr[]. 
            if(jQuery.inArray(data[$i][2], http_code_arr) > -1)
            {

                chart.series[0].setData(data);
                chart.series[0].color = "#FF0000";
                chart.series[0].graph.attr({ stroke: '#FF0000' });
            }
            else
            {
                chart.series[0].setData(data); 
                chart.series[0].color = "#3BBEE3";
                    chart.series[0].graph.attr({ stroke: '#3BBEE3' });
            }
            }       

        },  
         cache: false       
        });
    }   

    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
    chart = new Highcharts.Chart({
         chart: {
            renderTo: 'graph',
            type: 'spline',
            events: {
                load: requestData
            }
         },
         title: {
            text: 'Monitoring'
         },
         xAxis: {
            type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
         },
         yAxis: {
            minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Response time (ms)',
                    margin: 80
                }
         },
         series: [{
            name: 'Time',
            data: [],
         }]
      });
      });
    </script>

Return json value from get_hourly_data.php:

[[1359008687000,0.32605385780334,200],[1359008691000,0.31433510780334,200],[1359008694000,0.30737400054932,200],[1359008707000,0.30876302719116,200]]

consoloe.log(data):

[Array[3] 0: 1359009380000
1: 0.3274929523468
2: 404
length: 3
__proto__: Array[0]
, 
Array[3]
0: 1359009383000
1: 0.31776595115662
2: 200
length: 3
__proto__: Array[0]
, 
Array[3]
0: 1359009385000
1: 0.30725002288818
2: 404
length: 3
__proto__: Array[0]
, 
Array[3]
0: 1359009388000
1: 0.3050639629364
2: 200
length: 3
__proto__: Array[0]
] 



Could anyone please give me a hand?
4

1 回答 1

2

根据这篇文章，您只需要在系列上调用重绘。除了线对象之外，它还解决了如何完全改变系列的颜色，包括标记和图例。 动态更改 highcharts 中的系列颜色

var series = chart.series[0];
series.setData(data);

if(jQuery.inArray(data[$i][2], http_code_arr) > -1)
{
series.color = "#FF0000";
series.graph.attr({ stroke: '#FF0000' });
}
else
{
series.color = "#3BBEE3";
series.graph.attr({ stroke: '#3BBEE3' });
}

chart.legend.colorizeItem(series, series.visible);

$.each(series.data, function(i, point) {
    point.graphic.attr({
          fill: '#FF00FF'
    });
});

series.redraw();
于 2013-01-24T12:28:13.583 回答