chartJS-使用時間軸創建圖表

Question

我正在使用angular使用chart.js庫在html上創建圖表。 我想要實現一個折線圖，該折線圖是一年中不同日期的集合。 為此，我要從數據庫中提取數據，創建JSON，並在HTML中獲取JSON數據以創建圖表。 我想在一張圖表上創建6個不同的圖形。

圖表目前如下所示：

如您所見，所有不同的數據都放在一個地方，應該在2月到10月之間創建一條線。

碼：

angular.module("app", ["chart.js"]).controller("lineCtrl", function ($scope, $http) {
    var windowsData = new Array();
    var windowsSeries = [];
    //var windowsLabel = ['Jan','Feb','March','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'];
    var windowsLabel = [];
    var url = 'url';
    var regex = /^[A-Z]?|^[a-z]?/;
    //regex mach is equal to: A-AIX, W-Windows, C-CISCO, R-RHEL's


    $http.get(url).then(function (response) {
        for (var i = 0; i < response.data.length; i++) {
            var j = response.data[i].Not_fully_compliant;
            var k = response.data[i].Policy;
            var d = response.data[i].date;
            if(k.match(regex)=="W"){               
                windowsData.push([j]);
                windowsSeries.push(k);
                windowsLabel.push(d);
                console.log(windowsLabel);
                }
            }        
    });
    $scope.labels = windowsLabel;
    $scope.series = windowsSeries;
    $scope.data = windowsData;
    $scope.options = {
       scales:{
           xAxes:[{
               type:'time',
               time: {
                   unit: 'month',
                   displayFormats:{
                       'month': 'MMM YYYY'
                       }
                   }
               }]
           }
       }    
});

研究：我試圖應用Scatter.js，這是一個處理像我這樣的問題的庫，但是我無法用angular實現它。 http://dima117.github.io/Chart.Scatter/

我的JSON看起來如何：

[{"Policy": "Windows compliance-windows-int-windows7.nessus", 
"date": "2016-02-01 00:00:00", "Not_fully_compliant": "19"}, 
{"Policy": "Windows compliance-windows-int-dc-2012.nessus", 
"date": "2016-02-01 00:00:00", "Not_fully_compliant": "40"}, 
{"Policy": "Windows compliance-windows-dmz-server-2012.nessus", 
"date": "2016-02-01 00:00:00", "Not_fully_compliant": "0"}, 
{"Policy": "Windows compliance-windows-int-server-2003.nessus", 
"date": "2016-02-01 00:00:00", "Not_fully_compliant": "0"},
{"Policy": "Windows compliance-windows-int-server-2008.nessus", 
"date": "2016-02-01 00:00:00", "Not_fully_compliant": "1"}, 
{"Policy": "Windows compliance-windows-int-server-2012.nessus", 
"date": "2016-02-01 00:00:00", "Not_fully_compliant": "1"}]

它是2月一天的JSON。我不打算發布JSON行，這只是為了讓您了解情況。

我想為JSON中的每個策略創建6個不同的圖，並查看它在一段時間內的變化。 我怎樣才能做到這一點？

非常感謝您的幫助！

Answer 1

您看起來像“錯誤格式化”了要提供給chartJS的數據。

查看此文檔頁面，了解如何格式化它，並在整個說明中進行參考。

您實際上以數組形式提供數據：

windowsData.push([j]);

以這樣的數組結尾：

[19,40,0,0,1,1]

它只是從json中提取的y軸值。
那些與它們各自的x軸坐標無關的坐標。

您應該執行以下操作：

// Define a temp array.
var chartData = [];

在解析 json的get函數中...
現在 ...按對關聯x和y值...
並將它們作為objects放入temp數組中。

{x:value,y:value}

。

$http.get(url).then(function (response){
    for (var i = 0; i < response.data.length; i++) {
        var j = response.data[i].Not_fully_compliant;
        var k = response.data[i].Policy;
        var d = response.data[i].date;
        if(k.match(regex)=="W"){               
            chartData.push( "{x:" +d+ ", y:" +j+ "}" );
            windowsSeries.push(k);
            windowsLabel.push(d);
            console.log(windowsLabel);
        }
    }
});

// Then...
$scope.data = {datasets:[{data:chartData}]};    

因此，提供給chartJS的數據集object包含了一個“子對象” data ...
其中必須是對象數組...

您是否了解預期的信息？
;）

這是因為圖形中可能有多條線！

因此，最后一個實際數據數組 （一行）將是：
（請先解決json創建問題，然后再嘗試...
→不同的日期！ ）

[{
    x: 2016-02-01 00:00:00,
    y: 19
}, {
    x: 2016-02-01 00:00:00,
    y: 40
}, {
    x: 2016-02-01 00:00:00,
    y: 0
},{
    x: 2016-02-01 00:00:00,
    y: 0
}, {
    x: 2016-02-01 00:00:00,
    y: 1
}, {
    x: 2016-02-01 00:00:00,
    y: 1
}]

Disclamer：沒測試過...但是它肯定很接近...如果第一次嘗試不起作用。

Answer 2

非常感謝您的支持，但是我終於找到了解決方案。 問題是，當我有不同的變量時，我每次都嘗試推送數組，因此它會覆蓋每個日期的值。

解決方案是創建一個數組，每個策略一個，然后將值分配給該數組。 xAxis上的時間軸將適合於推送到標簽的日期。

這是代碼的正確部分：

var jsondata = [],jsondata1 = [],jsondata2 = [],jsondata3 = [],jsondata4 = [],jsondata5 = [],data = [];
var jsonLabel = [], series=[];
var url = 'url';
$http.get(url).then(function (response) {
    for (var i = 0; i < response.data.length; i++) {
        var j = response.data[i].Not_fully_compliant;
        var k = response.data[i].Policy;
        var d = response.data[i].date;

        if(k == "policy"){
            jsondata.push(j);
        }else if(k == "policy1"){
            jsondata1.push(j);
        }else if(k == "policy2"){
            jsondata2.push(j);
        }else if(k == "policy3"){
            jsondata3.push(j);
        }else if(k == "policy4"){
            jsondata4.push(j);
        }else if(k == "policy5"){
            jsondata5.push(j);
        }
        jsonLabel.push(d);
        series.push(k);
    }
});

$scope.labels = jsonLabel;
$scope.series = series;
$scope.data = [
    jsondata,jsondata1,jsondata2,jsondata3,jsondata4,jsondata5
];

圖表：

我需要做的就是立即更改顏色，因為這看起來很相似。

感謝您的幫助！