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，这是一个处理像我这样的问题的库，但是我无法用角度来实现它。 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的数据。

检查此documentation page on how to format it并通过此解释参考。

您实际上是以数组形式提供数据：

windowsData.push([j]);

以这样的数组结尾：

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

只有从json中提取的y轴值那些与它们各自的x轴坐标无关。

你应该这样做：

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

在你的get函数中，你剖析 json ...
现在 ...按对关联x和y值...
并将它们作为objects推送到临时数组中。

{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}]};

因此，数据集object提供给chartJS，其中包含“子对象”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
];

图表：

我现在需要做的就是改变颜色，因为这些看起来很相似。

感谢您的帮助！

chartJS - 使用时间轴创建图表

2 个答案: