0

Highcharts スプライン チャートを使用して、MySQL DB から動的にデータをプロットしています。

グラフは、Web サイトの HTTP ステータス コードも考慮した Web サイトの応答時間を表示します。

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

この投稿によると、シリーズで redraw を呼び出すだけで不足しています。また、線オブジェクトに加えて、マーカーや凡例も含めてシリーズの色を完全に変更する方法にも対処します。 ハイチャートの系列の色を動的に変更する

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 に答える