Question

我想使用chart.js显示thist数据。想法是可视化调查结果。主要用户将是团队领导。我想所有questionId的三个折线图。图表将显示日期，人名和问题值。

getHistoricalData() {
return [
    {
        date: "2018-03-14T12:00:00Z",
        results: [
            {
                teamMemberId: "Abby",
                questions: [
                    {
                        questionId: "1",
                        value: 5
                    },
                    {
                        questionId: "2",
                        value: 3
                    },
                    {
                        questionId: "3",
                        value: 3
                    }
                ]
            },
            {
                teamMemberId: "Bill",
                questions: [
                    {
                        questionId: "1",
                        value: 4
                    },
                    {
                        questionId: "2",
                        value: 4
                    },
                    {
                        questionId: "3",
                        value: 4
                    }
                ]
            },
            {
                teamMemberId: "Castor",
                questions: [
                    {
                        questionId: "1",
                        value: 5
                    },
                    {
                        questionId: "2",
                        value: 5
                    },
                    {
                        questionId: "3",
                        value: 5
                    }
                ]
            },
            {
                teamMemberId: "David",
                questions: [
                    {
                        questionId: "1",
                        value: 5
                    },
                    {
                        questionId: "2",
                        value: 3
                    },
                    {
                        questionId: "3",
                        value: 3
                    }
                ]
            },
            {
                teamMemberId: "Eugenia",
                questions: [
                    {
                        questionId: "1",
                        value: 2
                    },
                    {
                        questionId: "2",
                        value: 3
                    },
                    {
                        questionId: "3",
                        value: 4
                    }
                ]
            }
        ]
    },
    {
        date: "2018-03-07T12:00:00Z",
        results: [
            {
                teamMemberId: "Abby",
                questions: [
                    {
                        questionId: "1",
                        value: 5
                    },
                    {
                        questionId: "2",
                        value: 4
                    },
                    {
                        questionId: "3",
                        value: 5
                    }
                ]
            },
            {
                teamMemberId: "",
                questions: [
                    {
                        questionId: "1",
                        value: 4
                    },
                    {
                        questionId: "2",
                        value: 3
                    },
                    {
                        questionId: "3",
                        value: 4
                    }
                ]
            },
            {
                teamMemberId: "Castor",
                questions: [
                    {
                        questionId: "1",
                        value: 4
                    },
                    {
                        questionId: "2",
                        value: 4
                    },
                    {
                        questionId: "3",
                        value: 5
                    }
                ]
            },
            {
                teamMemberId: "David",
                questions: [
                    {
                        questionId: "1",
                        value: 4
                    },
                    {
                        questionId: "2",
                        value: 4
                    },
                    {
                        questionId: "3",
                        value: 2
                    }
                ]
            },
            {
                teamMemberId: "Eugenia",
                questions: [
                    {
                        questionId: "1",
                        value: 3
                    },
                    {
                        questionId: "2",
                        value: 3
                    },
                    {
                        questionId: "3",
                        value: 3
                    }
                ]
            }
        ]
    },
];
};

我不知道如何下载这类数据。提前谢谢。

Krzysiek

Answer 1

你需要做这样的事情this

尝试读取您的数据：

var dates = [];
var allTeamMember = [];

getHistoricalData().forEach(function(element, index, array) {
  dates.push(element.date);
  var teamMember = []
  element.results.forEach(function(element, index, array) {
    var questions = [];
    element.questions.forEach(function(element, index, array) {
        questions.push(element.value);
    });
    teamMember[element.teamMemberId] = questions;
  });
  allTeamMember.push(teamMember);
});

这将为您提供包含所有日期的数组。还有一个数组，每个日期都有一个内部数组，包含所有带有问题值的teamMembers。

获得此数据后，您可以像这样生成图表：

dates.forEach(function(element, index, array) {


$("#charts").append("<canvas id=\"chart-" + index + "\" width=\"400\" height=\"400\"></canvas>");
  var ctx = $("#chart-" + index);
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [1,2,3],
        datasets: [{
            label: 'Datum: ' + dates[index],
            data: allTeamMember[index][getKeys(allTeamMember[index])[0]],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});


});

function getKeys(obj, filter) {
    var name,
        result = [];

    for (name in obj) {
        if ((!filter || filter.test(name)) && obj.hasOwnProperty(name)) {
            result[result.length] = name;
        }
    }
    return result;
}

你不需要总是像我一样采用索引零，而是迭代你的团队成员。

希望有所帮助。试着自己动手。

在chartjs中显示JSON数据

1 个答案: