文章/答案/技术大牛

发布

社区首页 >问答首页 >chartJS -创建带时间线的图表

问chartJS -创建带时间线的图表
EN

Stack Overflow用户

提问于 2016-10-24 22:43:36

回答 2查看 13.4K关注 0票数 2

我正在使用chart.js库在html上使用angular来创建图表。我想要实现一个折线图，它是一年中不同日期的集合。为此，我从数据库中提取数据，创建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个不同的图表，看看它在一段时间内是如何变化的。我该怎么做呢？

非常感谢您的帮助！

javascript

jquery

angularjs

json

charts

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-10-25 17:37:16

谢谢你的支持，但我最终还是找到了解决方案。问题是，当我有不同的变量时，我每次都会尝试推送数组，所以它会覆盖每个日期的值。

解决方案是创建一个数组，每个策略一个数组，然后将值分配给这个数组。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
];

图表：

我现在要做的就是改变颜色，因为这个看起来很像。

谢谢你的帮助!

票数 1

Stack Overflow用户

发布于 2016-10-25 04:00:18

您看起来像是在“错误格式化”要提供给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 = [];

在解析json的get函数中...

现在..。将x和y值成对关联...

在temp数组中创建并推送它们作为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
}]

解说者:没有测试过……但它确实很接近...如果在第一次尝试时不起作用。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40221276

复制

相似问题

问chartJS -创建带时间线的图表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问chartJS -创建带时间线的图表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问chartJS -创建带时间线的图表
EN