使用多数据绘制chartjs图表

Question

我正在尝试使用chartjs绘制折线图。这是我的数据样本：

{"receiver_id":"3","broadcaster_id":"1","signal_strength":"34","date_time":"2015-06-18 17:13:05"},  
{"receiver_id":"5","broadcaster_id":"1","signal_strength":"37","date_time":"2015-06-18 17:13:06"},
{"receiver_id":"4","broadcaster_id":"1","signal_strength":"35","date_time":"2015-06-18 17:13:09"},
{"receiver_id":"1","broadcaster_id":"1","signal_strength":"36","date_time":"2015-06-18 17:13:11"}

我试图按照chartjs的文档但它没有用。我该怎么办？

这是我的代码段：

(function( $ ) {

    $.ajax({
        url: "records.json",
        dataType: "json",
        success: function(data){
            console.log(data);
            drawChart(data);
        },
        fail: function(){
            console.log("Error");
        }
    });
    var drawChart = function(data){
        var receiver1_data = [];
        var receiver1_time = [];
        var receiver3_data = [];
        var receiver3_time = [];
        var receiver4_data = [];
        var receiver4_time = [];
        var receiver5_data = [];
        var receiver5_time = [];
        for(var i = 0, j = data.length; i < j ; i++){
            if(data[i]["receiver_id"] == 1){
                receiver1_data.push(data[i]["signal_strength"]);
                receiver1_time.push(data[i]["date_time"]);
            }
            if(data[i]["receiver_id"] == 3){
                receiver3_data.push(data[i]["signal_strength"]);
                receiver3_time.push(data[i]["date_time"]);
            }
            if(data[i]["receiver_id"] == 4){
                receiver4_data.push(data[i]["signal_strength"]);
                receiver4_time.push(data[i]["date_time"]);
            }
            if(data[i]["receiver_id"] == 5){
                receiver5_data.push(data[i]["signal_strength"]);
                receiver5_time.push(data[i]["date_time"]);
            }
        }
        var line_data1 = {
            labels: receiver1_time,
            datasets: [
                {
                    label: "Receiver 1",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "green",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: receiver1_data
                }
            ]
        };
        var line_data3 = {
            labels: receiver3_time,
            datasets: [
                {
                    label: "Receiver 3",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "blue",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: receiver3_data
                }
            ]
        };
        var line_data4 = {
            labels: receiver4_time,
            datasets: [
                {
                    label: "Receiver 3",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "orange",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: receiver4_data
                }
            ]
        };
        var line_data5 = {
            labels: receiver5_time,
            datasets: [
                {
                    label: "Receiver 3",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "violet",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: receiver5_data
                }
            ]
        };
        // Get the context of the canvas element we want to select
        var ctx = document.getElementById("myChart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(line_data1);
        myLineChart.add(line_data3);
        myLineChart.add(line_data4);
        myLineChart.add(line_data5);
        myLineChart.update();
    }


}(jQuery));

<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

编辑：我忘了提到我想为4个不同的receiver_id显示4个不同的行。

Answer 1

当您int / int => returns int float / float => returns float double /double => returns double int / double => returns double int / float => returns float 时，您还必须指定X轴值。 尝试类似AddData

的内容