Question

我正在使用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?

Answer 1

根据这篇文章，您只缺少在系列中调用重绘。除了线对象之外，它还解决了如何完全改变系列的颜色，包括标记和图例。 Changing series color in highcharts dynamically

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();

Highcharts：动态更改样条线图颜色

1 个答案: