如何从多维数组中选择值来绘制图形?

时间:2016-12-01 23:26:51

标签: javascript html arrays html5 highcharts

拥有JSON

<c:set var="json_text">
    {
    "FailedCount":[{"FailedCount_MEAS_VALUE":1,"DATETIME_CURRENT":"12:01"},
    {"FailedCount_MEAS_VALUE":0,"DATETIME_CURRENT":"12:02"},
    {"FailedCount_MEAS_VALUE":3,"DATETIME_CURRENT":"12:03"},
    {"FailedCount_MEAS_VALUE":4,"DATETIME_CURRENT":"12:04"}],
    "SucceededCount":[{"SucceededCount_MEAS_VALUE":110},
    {"SucceededCount_MEAS_VALUE":120},
    {"SucceededCount_MEAS_VALUE":130},
    {"SucceededCount_MEAS_VALUE":140}]
    }
    </c:set>

准备数据

function culcJson() {
            var jsonObj = ${json_text};
            var VALUES=[];
            var n = jsonObj.FailedCount.length, m = 5;
            var mas = [];
            for (var i = 0; i < m; i++){
                mas[i] = [];
                for (var j = 0; j < n; j++){
                    if (i==0) {
                        mas[i][j] = jsonObj.FailedCount[j].FailedCount_MEAS_VALUE;
                    }
                    if (i==1)
                    {
                        mas[i][j] = jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE;
                    }
                    if (i==2)
                    {
                        mas[i][j] =jsonObj.FailedCount[j].FailedCount_MEAS_VALUE+jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE;
                    }
                    if (i==3)
                    {
                    var KPI = jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE / (jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE + jsonObj.FailedCount[j].FailedCount_MEAS_VALUE) * 100;
                        mas[i][j] = +KPI.toFixed(2);
                    }
                    if (i==4)
                    {
                        mas[i][j] =jsonObj.FailedCount[j].DATETIME_CURRENT;
                    }
                        VALUES.push(mas[i][j]);
                }}
            console.log(mas);
            return VALUES;
        }

尝试根据DATETIME的KPI构建图表

$(function () {

            var VALUES;
            VALUES=culcJson();
            result_newjson.innerHTML = VALUES;

            $('#container').highcharts({
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: '${title}'
                },
                xAxis: {
                    categories: ["12:01","12:02","12:03","12:04"]

                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [
                    {
                        name: 'KPI',               
                       data: [99.5,100,98.56,99.99]
                    }
                ]
            });
        });

如何正确引用VALUES数组以仅选择时间和KPI而不是静态值 类别:[“12:01”,“12:02”,“12:03”,“12:04”]数据:[99.5,100,98.56,99.99] ?

0 个答案:

没有答案